Skip to main content
se añadieron 163 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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.

- W3C Recommendation, apartado 4.10.5.1.15

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>

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.

- W3C Recommendation, apartado 4.10.5.1.15

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=$(this);
  var frmData=$thisForm.serialize();
  var msgInfo=`Se envió el formulario: ${$thisForm.prop('id')}\nCon los datos: ${frmData}`;
  console.log(msgInfo);
});
<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>

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.

- W3C Recommendation, apartado 4.10.5.1.15

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 = $(this);
  var frmData = $thisForm.serialize();
  var msgInfo = `Se envió el formulario: ${$thisForm.prop('id')} <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"> Apellido: <input type="text" name="ibxApellido" value="Sanz">
  <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"> Apellido: <input type="text" name="ibxApellido" value="Mercado">
  <input type="submit" value="Enviar Form. 2">
</form>
<br />
<div id="info"></div>

Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

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.

- W3C Recommendation, apartado 4.10.5.1.15

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=$(this);
  var frmData=$thisForm.serialize();
  var msgInfo=`Se envió el formulario: ${$thisForm.prop('id')}\nCon los datos: ${frmData}`;
  console.log(msgInfo);
});
<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>