0

.Send {
position:relative;
top:10px;
}
<h1>primer formulario</h1>
<form action="#" method="POST" >
<label for="Nombre" ></label>
           <input type="text" id="Nombre"  name="Name" placeholder="Escriba su edad">
           <label for="Nombre" ></label>
           <input type="text" id="Nombre"  name="Name" placeholder="Peso">
</form>


<h1>Segundo Formulario</h1>
<form action="#" method="POST" >
<label for="Nombre" ></label>
           <input type="text" id="Nombre"  name="Name" placeholder="Nombre">
           <label for="Nombre" ></label>
           <input type="text" id="Nombre"  name="Name" placeholder="Escriba su correo">
</form>

<input class="Send" type="Submit" value="Enviar">

¿Lo que quisiera saber? es de que forma se podría asociar ese Input Submit con los dos formularios, como puse de ejemplo en el código tengo el formulario 1 y el formulario 2 pero están totalmente separado , claro el destino a donde lo. voy a enviar tiene que ser el mismo correo

yo intente hacerlo asi pero no me funciono

  $( "#SEND" ).click(function() {
  $( "#form1" ).Submit();
$( "#form2" ).Submit();
});

2
  • Amigo una pregunta, por que lo trabajas por separado? Como dices que lo enviaras al mismo Correo, no seria mejor trabajarlo en un mismo form? Lo que yo veo es un mismo formulario divido en 2. Almacenaras los datos por separado y luego enviaras un Correo. Especifìcame un poco mas para tratar de ayudarte. Commented el 16 feb. 2020 a las 2:01
  • bueno amigo , te explico que si lo ponía todo junto entonces los campos me venían vacios , osea enviaba los input de tipo checkbox pero los textos normales no los enviaba entonces ese era mi problema,
    – John
    Commented el 16 feb. 2020 a las 2:37

2 respuestas 2

1

Aunque quizá no se justifique tener formularios separados, sí es posible recoger por separado la información de uno o más formularios.

Dado que usas jQuery, serialize() facilita bastante el trabajo para nuestro propósito. Habría que darle un id distinto a cada formulario (la especificación prohíbe asignar más de un id a los elementos del mismo DOM, sean los que sean). Daríamos también un name distinto a los elementos. Los namepueden ser iguales, pero en ese caso tendrías que usar serializeArray para unir los datos y la forma de leerlos en el destino también tendría que modificarse.

He modificado algunas cosas, sobre todo por coherencia. Por ejemplo el botón, que está fuera de ambos formularios, no es lógico que sea declarado como del tipo submit (esto tiene poca importancia para el funcionamiento, pero no es coherente). Lo que sí he hecho ha sido darle un id. Y los datos se lanzarán dede la función que escucha los clicks de ese botón.

El resultado será algo parecido a esto:

NameA=Marta&PesoA=10&NameB=Santiago&PesoB=20

$(function() {
  $("#btnEnviar").click(function(event) {
    /*Evita que se recargue la página*/
    event.preventDefault();
    /* Serializamos en una sola variable ambos formularios*/
    var allData = $("#formA, #formB").serialize();
    /*Prueba*/
    console.log(allData);
    /*Podemos usar allData para enviarlo por Ajax o lo que sea*/
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>primer formulario</h1>
<form id="formA" action="#" method="POST">
  <label for="Nombre"></label>
  <input type="text" id="NombreA" name="NameA" placeholder="Escriba su nombre">
  <label for="Peso"></label>
  <input type="text" id="PesoA" name="PesoA" placeholder="Peso">
</form>


<h1>Segundo Formulario</h1>
<form id="formB" action="#" method="POST">
  <label for="Nombre"></label>
  <input type="text" id="NombreB" name="NameB" placeholder="Nombre">
  <label for="Nombre"></label>
  <input type="text" id="PesoB" name="PesoB" placeholder="Escriba su correo">
</form>

<button class="Send" id="btnEnviar">Enviar</button>

Con serializeArray o de otro modo se pueden armar datos más complejos y anidados, si esto es realmente justificado.

-1
$('#guardar-registro-archivo, #guardar-registro-archivo2').on('submit', function (e) {

//tu codigo
});
1
  • 2
    Tu respuesta es solo codigo. Por favor mira Cómo responder. Se pide que expliques que hace este código (mas alla que a ti vos te parezca obvio, puede que otro usuario no lo vea tan simple).
    – gbianchi
    Commented el 25 may. 2023 a las 14:43

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.