使用jQuery将变量大小的表单传递给PHP文件进行处理

时间:2012-12-26 19:41:37

标签: php javascript jquery ajax

我有一个从MySQL数据库填充的可变大小(长度)的表单。有4个字段构成用于创建按钮的信息(id,按钮#,名称和价格)。提交表单时,我想将所有值保存到MySQl数据库,并使用成功消息更新页面底部的div。目前我有这个表格。

<?php include("./db/db_connect.php"); ?>
<form method="POST" action="fixcon.php">
<?php
$sql = "SELECT * FROM concessions ORDER BY button ASC ";
$result = mysql_query($sql);
echo "<table border='1' id='table'>
<tr>
<td align='center'>Button #</td>
<td align='center'>Item</td>
<td align='center'>Price</td>
<td align='center'>Button</td>
</tr>";

while($row = mysql_fetch_array($result)) {
  echo "<tr>";
  echo "<td><input type='text' name='btn[]' size='5' value='".$row['button']."'/></td>";
  echo "<td><input type='text' name='itm[]' size='5' value='".$row['item']."'/></td>";
  echo "<td><input type='text' name='prc[]' size='5' value='".$row['price']."'/></td>";
  echo "<td><input type='button' class=myButton name='button01' value='".$row['item'].'&#10;$'.$row['price']."'></td>";
  echo "<input type='hidden' name='id[]' value='".$row['id']."'/>";
  echo "</tr>";
}
  echo "</table>";
  mysql_close($con);
  ?>

将其发送到

的任何PHP
<?php include("./db/db_connect.php"); ?>
<?php
$buttonArray = $_POST['btn'];
$itemArray = $_POST['itm'];
$priceArray = $_POST['prc'];
$idArray = $_POST['id'];

$numberofItems = count($itemArray);

for ($i=0; $i<$numberofItems; $i++) {
 $sql = "UPDATE concessions SET button = '".$buttonArray[$i]."', item = '".$itemArray[$i]."', price = '".$priceArray[$i]."' WHERE id = '".$idArray[$i]."'";
 mysql_query($sql);
}

echo "<b>User updated</b>";
mysql_close($con);
?>

对于我的所有其他页面,我将表单发送给JS并使用类似......的内容

xmlhttp.open("GET","myfile.php?a="+val1+"&b="+val2+"&c="+val3+"&d="+val4,true);
xmlhttp.send();

PHP文件保存数据并为div生成消息。写入div ...

xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  }
}

这对我所有其他页面都很好,但由于我不知道会有多少字段,所以我无法对xmlhttp.open语句进行硬编码。不熟悉jQuery(现在学习)或ajax(我只知道jQuery)我不知道如何执行此操作。我知道我需要序列化数据并完成并使用

将其发送到javascript
$.each($('#yourform').serializeArray(), function() { console.log(" <" +this.name+ '>' + this.value + "</" + this.name + "> " ); });

但我不知道如何将其发送到PHP文件以将其写入MySQL数据库,然后发送回更新页面上的div。请提供完整的代码,因为到目前为止我一直在尝试实现片段和建议时遇到很多问题。

1 个答案:

答案 0 :(得分:1)

由于您不知道输入的数量,您可以在jquery中使用serialize来序列化整个表单。这是manual

从手册中,

 $('form').submit(function() {
  alert($(this).serialize());
  return false;
 });

这会生成标准的查询字符串:

a=1&b=2&c=3&d=4&e=5