使用jquery将多个输入框的值获取到多维数组中

Posted 2023-02-24

【中文标题】使用jquery将多个输入框的值获取到多维数组中

【英文标题】：Getting value of multiple input boxes into multidimensional array using jquery

【发布时间】：2015-05-08 19:13:40

【问题描述】：

我有多个输入元素排列成 16 行和 5 列（就像网格一样）。 16 行的内容作为 16 条记录插入到 mysql 表中，每条记录包含 5 个字段。我想要一种使用 jquery 将所有输入的值获取到数组中并将其传递给 ajax 发布请求的方法。

dataentry.php 包含此代码

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 包含以下代码：

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"  />';
   echo '</div>';

 echo '</form>';

以上两个脚本都在工作，这将在 dataentry.php 中的 DOM 中添加一个表单“shiftentry”。此表单包含大约 21 行和 8 列，其中包含输入元素。我想要一种方法来获取这个 21 x 8 输入元素中的值并将其传递给 jQuery 发布请求。有两个问题。

既然表单是在DOM加载完成后添加的，那么如何获取值呢？ 有没有办法使用循环而不是为每个输入元素单独的行来读取所有输入值？

我的最终目标是将这 21 行附加到一个 mysql 表中。这部分我知道，一旦我得到所有的值。有什么建议吗？

我有这个函数可以创建一个多维输入值数组。但在这种情况下，“form1”在 DOM 完成之前加载。但是在上面的场景中，表单是在DOM加载完成后动态添加的

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


);

我在这个页面里还有另外一个jquery脚本用来遍历输入框（显然这些输入框是在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();
);

如何在脚本中使用delegate选项用于在脚本中遍历获取输入值？

【参考方案1】：

在提交表单时，如果您想要 JSON，我们可以使用 $("#frmServiceMaster").serialize() 来获取序列化字符串，然后使用 $("#frmServiceMaster").serializeArray() 它将所有表单输入转换为字符串或 JSON

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

);

工作FIDDLE

【讨论】：

我编辑了我的问题。请浏览并提出宝贵建议