Como dice la especificación:
The
input
element represents a button that, when activated, submits the form.
El elemento (
input type="submit"
) representa un botón que, cuando es activado (se hace click en él), envía el formulario.
Esto quiere decir que cada formulario responde solamente al click de su respectivo botón submit.
Podemos verlo con un ejemplo.
Aquí en el DOM tenemos dos formularios distintos, cada uno con su botón. Luego en Javascript tenemos un código genérico que escucha el envío de cualquier elemento de tipo form
.
Podrás ver que al enviar uno u otro formulario el código sólo capturará los datos de ese formulario. El formulario que se envió es identificado aquí mediante: $(this)
.
Puedes hacer la prueba en directo:
$("form").on("submit", function(event) {
event.preventDefault();
var $thisForm=$$thisForm = $(this);
var frmData=$thisFormfrmData = $thisForm.serialize();
var msgInfo=`SemsgInfo = `Se envió el formulario: ${$thisForm.prop('id')}\nCon <br />Con los datos: ${frmData}`;
console.log(msgInfo);
$("#info").html(msgInfo);
});
#info {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Formulario 1</h3>
<form id="frmOne" action="#">
Nombre: <input type="text" name="ibxNombre" value="Pedro"> <br /> Apellido: <input type="text" name="ibxApellido" value="Sanz"> <br />
<input type="submit" value="Enviar Form. 1">
</form>
<hr />
<h3>Formulario 2</h3>
<form id="frmTwo" action="#">
Nombre: <input type="text" name="ibxNombre" value="Juan"> <br /> Apellido: <input type="text" name="ibxApellido" value="Mercado"> <br />
<input type="submit" value="Enviar Form. 2">
</form>
<br />
<div id="info"></div>