Tengo dos formularios, en html, cuando envío uno de ellos, los valores del otro se restablecen a los valores predeterminados, ¿cómo puedo evitar que ocurra este comportamiento?
Aquí está el código completo:
<!DOCTYPE html> <html lang="pt-br"> <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>challenge</title> </head> <body> <section class="container"> <div class="container__box"> <h1>Title</h1> <form id="firstForm"> <input type="text"><input type="submit" value="Submit"> </form> <form class="firstform"> <input type="checkbox" id="form2" class=""><label for="form2">Checkbox of separated form, that I do not want to reset when first form is submit s=is clicked.</label> </form> </div> </section> </body> </html>para evitar enviar el formulario, debe usar javascript y agregar preventDefault.
`const enviar=document.querySelector("#firstForm")
enviar.addEventListener("enviar",(e)=>{ e.preventDefault() })`
Cuando envía un formulario, los datos que contiene se agrupan en una solicitud HTTP y se envían al servidor. Luego, el servidor responde con un nuevo documento HTML que muestra el navegador.
Cuando genere la nueva página, el servidor no tendrá los datos del otro formulario, por lo que no podrá incluir valores por defecto en la nueva página.
Hay varios enfoques que podría tomar:
Combine los formularios en uno solo, luego escriba el código del lado del servidor para determinar qué botón de envío se usó para enviar el formulario para que pueda actuar en el conjunto de datos correcto, luego use el conjunto de datos combinado de ambos formularios originales para generar el predeterminado valores para la nueva página.
No envíe ningún contenido en la respuesta y use un estado 204 en su lugar. El gran inconveniente aquí es que no se pasa información al usuario para decirle que el formulario se envió correctamente.
Reemplace el envío del formulario con Ajax . Cree un detector de eventos para el evento de envío del submit , evite el comportamiento predeterminado (de enviar el formulario) y realice una solicitud HTTP utilizando la API de búsqueda en su lugar. Luego use la manipulación DOM para presentar el resultado al usuario.
Realice un seguimiento de todas las entradas del usuario con JS del lado del cliente y guárdelas en algún lugar persistente (como localStorage ). Cada vez que se carga la página, busque datos allí para volver a llenar los campos.