Demo of serializeArray()

Sex Male Female
Agree to terms & conditions


<table><form id=f1>
<tr><td>Name</td><td><input type=text name=t1></td></tr>
<tr><td>Address</td><td><textarea rows=3 cols=40 name=t2 id=t2></textarea></td></tr>
<input type=radio name=r1 value=male>Male
<input type=radio name=r1 value=female>Female

<tr><td>Class</td><td><select name=class>
 <option value=first>First</option>
<option value=second>Second</option>
<option value=third>Third</option>


<tr><td><input type=checkbox value=yes name=c1></td>
<td>Agree to terms & conditions</td></tr>
<tr><td><input type="button" id="b1" value="Submit"></td>


   $(document).ready(function() {
var form_list = $("#f1").serializeArray();
form_list.push({name: 'NewData', value: 'Data value'});
jQuery.each( form_list, function( i, field ) {
      $( "#display" ).append( + '>' +field.value + " " );

Submit Data

We can submit this data to a backend PHP script by using POST method and collect the same data to display. Here we will be sending the extra data ( not originated from the FORM ) and collect the same after submitting the same to a backend script. .

The modified JQuery part is here.

   $(document).ready(function() {
var form_list = $("#f1").serializeArray();
form_list.push({name: 'NewData', value: 'Data value'});

$.post( "serialize-demo2ck.php", form_list,function(return_data,status){
$( "#display" ).append(return_data.t1);
$( "#display" ).append(return_data.t2);
$( "#display" ).append(return_data.NewData);

The code for the backend script to collect and post back using JSON string is here.


echo json_encode($elements);

Post your comments , suggestion , error , requirements etc here .

Most Popular JQuery Scripts


Two dependant list boxes


Calendar with Date Selection


Data change by Slider


Show & Hide element

JQuery Video Tutorials

We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2021 All rights reserved worldwide Privacy Policy Disclaimer