Menu
I'm trying to send parts of one form by AJAX using jQuery's serialize. The form has 16 textfields. I have 4 buttons. The button0 sends the textfields 0,1,2,3, and button1 sends the textfields 4,5,6,7, etc etc. How can I do it?
HTML
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Serialize</title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> </head> <body> <form id='miForm' class='miForm' name='miForm' action='env.php' method='POST'> </form> </body> </html> jQuery:
$(document).ready(function(){ for(i=0;i<16;i++){ $('form').append('Campo de texto '+i+'<input type="text" id="txt'+i+'" value="Campo '+i+'" readonly="yes"/><br>'); } for(i=0;i<4;i++){ $('form').append('<input type="button" id="butEnv'+i+'" value="Enviar'+i+'"/><br>'); } $('form').append('<input type="button" id="butGen" value="Enviar Global"/><br>'); }); 
328
The serialize() method creates a URL encoded text string by serializing form values. You can select one or more form elements (like input and/or text area), or the form element itself. The serialized values can be used in the URL query string when making an AJAX request.
We can submit a form by ajax using submit button and by mentioning the values of the following parameters. type: It is used to specify the type of request. url: It is used to specify the URL to send the request to. data: It is used to specify data to be sent to the server.
Use param() method to serialize the object element as query string and store it into a variable.
Our next step is to insert Jquery Ajax Form Submit with Serializing because our article title is Asp.Net MVC jQuery AJAX Form Submit using Serialize Form Data into Model. Switch back to CREATE.CSHTML file to insert AJAX code. //Serialize the form datas. You can see in the above form where we enter data.
This is used to send Ajax request by creating serialize data on click or load event. This way, you don't need to get one by one input value and send it to Ajax request. Below example output the query string data of form fields when button clicks. In another way, jQuery serializeArray () method used to creates an array of objects from field values.
The jQuery serializeArray () method will create object into array and encoded as a JSON string.You can use this method to send form data into serialize key value pair. The request serialize data will be:
If you will be using jQuery’s Ajax Form Submit, you can send the form data to the server without reloading the entire page. This will update portions of a web page – without reloading the entire page. How to add extra fields or data with Form data in jQuery ajax?
If you really want to stay with only one form try something like I did in this fiddle.
Create sub parts for your form.
<form> <div id="first"> <input name="tbox1" type="text"> <input name="tbox2" type="text"> <input name="tbox3" type="text"> <input id="button1" type="button" value="button1"> </div> <div id="second"> <input name="tbox4" type="text"> <input name="tbox5" type="text"> <input name="tbox6" type="text"> <input id="button2" type="button" value="button2"> </div> </form> And then just select all the elements of the parts:
$(document).ready(function() { $('#button1').on('click', function() { alert($('#first input').serialize()); }); $('#button2').on('click', function() { alert($('#second input').serialize()); }); }); Of course if you also have select boxes you have to add them to the selectors. For example:
$('#second input, #second select').serialize() If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
