0

los pongo en contexto. Actualmente tengo una aplicación web que, describiéndola sencillamente, tiene una lista desplegable, y cuando seleccionas una opción y haces clic en un botón llamado "Enviar", éste te redirecciona a otra página con un formulario.

Lo que me pidieron ahora es que cuando seleccione una opción, sacar el botón y que en vez de redireccionar, se me cargue el formulario correspondiente abajo de la lista desplegable.

Por lo que estuve viendo, con Javascript existe fetch(), pero ésta apunta a una API, y yo necesito que se me cargue un formulario que tengo dentro de mi proyecto, es decir no es una API, me explico?

Quería saber si me podrían ayudar con esto, porque tengo bajos niveles de conocimiento con HTML y Css.

Éste es mi formulario. Lo que se me ocurre es poner cada formulario debajo de éste, pero lo veo poco práctico.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <form action="/Home/Opcion" method="post" id="form" class="form">
                    <div class="col-6 mx-auto mb-4 mt-5">
                    <label class="form-label" for="formulario">Elija un Formulario:</label>
                    <select id="formulario" class="form-select" name="formulario" title="Formulario" required>
                        <option value="">Elija una opción</option>
                        <option value="dec">DEC</option>
                        <option value="lfd">LFD</option>
                        <option value="sac">SAC</option>
                    </select>
                    <div class="col-12 buttonSubmit">
                        <input class="btn btn-primary" type="submit" name="submit">
                    </div>
                </div>
            </form>
            </div>
        </div>
    </div>
</body>
</html>
3
  • Fetch() puede interpretar un formulario (me refiero a texto o HTML tal cual), pero necesita que algo se lo envie. Es decir, montate un PHP que haga un echo del cacho de formulario que necesitas y lo llamas con el fetch y lo recoges con response.text() para mostrar en un nuevo div a pie de tu select (fuera del form)
    – masterguru
    Commented el 8 sept. 2022 a las 18:37
  • No sirve hacerse un Razor View? Digo porque tampoco eh usado php, no creo que es dificil igual
    – popo
    Commented el 8 sept. 2022 a las 18:40
  • 1
    Ah, ni idea de lo que es un Razor View... veo que es algo de ASP. Bueno, eso da igual, la cuestion es que la URL que pongas en el fetch tiene que devolver algo, da igual lo que corra en el servidor.
    – masterguru
    Commented el 8 sept. 2022 a las 18:49

1 respuesta 1

1

Puedes colocar un iframe, donde vas cargando los formularios. Aquí un ejemplo

function mostrarFormulario(valor){
 document.getElementById("Contenedor").src=valor
}
select {
display:block;
}
<select id="formulario" class="form-select" name="formulario" title="Formulario" onchange="mostrarFormulario(this.value)">
                        <option value="">Elija una opción</option>
                        <option value="https://stacksnippets.net/">DEC</option>
                        <option value="formulario2.html">LFD</option>
                        <option value="formulario.php">SAC</option>
                    </select>
                    
<iframe id="Contenedor" src=""></iframe>

El select tiene un evento onchange, que cuando cambia de valor llama a la función mostrarFormulario la cual cambia el contenido del iframe. Cada "option" del "select" tiene como valor la página que quiero mostrar en el iframe

6
  • Hay alguna forma para sacar el scrollbar? Creo que eso podria funcionar...
    – popo
    Commented el 8 sept. 2022 a las 18:59
  • Agrega la propiedad scrolling="no" al iframe, junto con un style="overflow: hidden"
    – Pipe
    Commented el 8 sept. 2022 a las 19:05
  • @Yussef cómo puedo mandar la vista que está dentro de mi carpeta Views? Es posible?
    – popo
    Commented el 8 sept. 2022 a las 19:32
  • @popo Views?? Ocupas asp.net? si es así, son vistas parciales??
    – Yussef
    Commented el 8 sept. 2022 a las 19:52
  • Si, ocupo asp.net pero no utilizo vistas parciales
    – popo
    Commented el 8 sept. 2022 a las 19:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.