使用jquery将多个输入框的值转换为多维数组

Question

I have multiple input elements arranged in 16 rows and 5 columns (Just like a grid) . The contents of the 16 rows are inserted into a mysql table as 16 records with each record contains 5 fields. I want a method to get the value of all the input into an array using jquery and pass this to a ajax post request.

dataentry.php contains this code

jQuery('#metentry').submit(function(e){
     e.preventDefault(); 

 // getting data from form to variables
 var date=jQuery('#stddate').val();
 var kgsunit=jQuery('#unit').val();
 var kgsshift=jQuery('#shift').val();


//sending data to script
 jQuery.post("get_blank_form.php", {
 "date":date, 
 'unit':kgsunit,
 'shift':kgsshift, 
 },    function(data) {      

  //displaying message
jQuery('#blankform').html(data);
jQuery('#formpanel').hide();


  });

get_blank_form.php contains this code:

echo'<form id="shiftentry" name="shiftentry" >';


 echo "Date:<input id=shiftdate value='".$date."'/>"; 
 echo "Unit:<input id=shiftdate value='".$unit."'/>";
 echo "Shift:<input id=shiftdate value='".$shift."'/><br/>";

   echo "<table><tr><th>No</th><th>Ele</th><th>Location</th><th>Drate </th><th>H3 Val </th><th>Part </th>   <th>Iod</th><th>Cont. </th></tr>";
            while($row2=mysql_fetch_array($result_sec))
                { 
                echo "<tr>";
                echo "<td>".++$rc."</td>";
                echo "<td><input size='5' id='".$row2['ele']."' value='".$row2['ele']."' /></td>";
                echo "<td><input id='".$row2['loc_id']."' value='".$row2['loc']."' /></td>";
                echo "<td><input size='5' id='drate".$rc."'  value='".$row2['drate']."'/></td>";
                echo "<td><input size='5' id='h3".$rc."' value='0' /></td>";
                echo "<td><input size='5' id='part".$rc."' value='0' /></td>";
                echo "<td><input size='5' id='iod".$rc."' value='0' /></td>";
                echo "<td><input size='5' id='cont".$rc."' value='0' /></td>";
                echo "</tr>";
            }



  echo " </table>";



   echo '<div align="center">';
   echo '<input type="submit" id="submit2" name="submit2" value="Submit" width="30" />';
   echo '</div>';

 echo '</form>';

Both the above scripts are working and this will add a form"shiftentry" to the DOM in dataentry.php. This form conains around 21 rows and 8 columns containing input elements. I want a method to get the values in this 21 x 8 input elements and pass it to a jQuery post request. There are two issues.

1. Since the form is added after the DOM is loaded, how to get the value?
2. Is there any way to read all the input values using a loop instead of separate lines for each input element?

My final aim is to append this 21 rows into a mysql table. This part I knew, once I get all the values. Any suggestions ?

I have this function which create a multi dimensional array of input values. But in this casethe 'form1' is loaded before DOM is completed. But in the above scenario, form is dynamically added after DOM loding is completed

jQuery('#form1').submit(function(e){
     e.preventDefault(); 

        var arr = jQuery('#form1 tr:gt(0)').map(function() {
    return [jQuery('input', this).map(function() {
        return this.value;
    }).get()];
}).get();


});

I also have another jquery script in this page which is used to traverse through the input boxes (obviously, these input boxes are loaded after DOM)

jQuery(document).delegate('input','keyup',function(e){
if(e.which==39)
jQuery(this).closest('td').next().find('input').focus();
else if(e.which==37)
jQuery(this).closest('td').prev().find('input').focus();
else if(e.which==40)
jQuery(this).closest('tr').next().find('td:eq('+jQuery(this).closest('td').index()+')').find('input').focus();
else if(e.which==38)
jQuery(this).closest('tr').prev().find('td:eq('+jQuery(this).closest('td').index()+')').find('input').focus();
});

How can I use the delegate option in the script used for traverse in the script for getting input values?

Answer 1

On form submit we can use $("#frmServiceMaster").serialize() to get the serialize string if you want JSON then use $("#frmServiceMaster").serializeArray() It will convert all form input to String or JSON

$("#frmServiceMaster").submit(function(e){
event.preventDefault();
alert($("#frmServiceMaster").serialize());
    alert($("#frmServiceMaster").serializeArray());

});

working FIDDLE