what happens if I have several forms separated within the same web page, each form has its respective type input submit the question is when I press a submit type input will all the information be sent (if I press the input of the form1 the info of the form2 will also be sent?) or each input respects your form? , I do not have code because I'm just going to start and they told me that you can not, if so, I hope you can help me ... thanks in advance
As the specification says:
The% co_of% element represents a button that, when activated, submits the form.
The element (
input) represents a button that, when activated (click on it), sends the form.
This means that each form responds only to the click of its respective submit button.
We can see it with an example.
Here in the DOM we have two different forms, each with its button. Then in Javascript we have a generic code that listens for the sending of any item of type input type="submit" .
You can see that when sending one or another form the code will only capture the data of that form . The form that was sent is identified here by: form .
You can do the test live:
$("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>When you click on a submit, only the form to which it belongs is sent. Even each form could have different "destination" pages, but only the form information to which the button belongs will be sent.