Demo of serializeArray()

Name
Address
Sex Male Female
Class
Agree to terms & conditions

HTML

<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>
<tr><td>Sex</td><td>
<input type=radio name=r1 value=male>Male
<input type=radio name=r1 value=female>Female
</td></tr>

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

</td></tr>

<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>
<td></td></tr>
</form>
</table>

JQuery

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

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.

<script>
   $(document).ready(function() {
      $("#b1").click(function(event){
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);
},"json");

});
   });
</script>
The code for the backend script to collect and post back using JSON string is here.

<?Php
$t1=$_POST['t1'];
$t2=$_POST['t2'];
$newdata=$_POST['NewData'];
$elements=array("t1"=>'T',"t2"=>'T',"NewData"=>"");
$elements["t1"]=$t1;
$elements["t2"]=$t2;
$elements["NewData"]=$newdata;

echo json_encode($elements);
?>


plus2net.com



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







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer