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>
response.text()
para mostrar en un nuevo div a pie de tu select (fuera del form)