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

<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>

<?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);
?>