I have a form that is of variable size (length) that is populated from a MySQL db. There are 4 fields that make up the information used to create a button (id, button#, name and price). When the form is submitted I want to save all the values to the MySQl db and update a div at the bottom of the page with a success message. Currently I have this form.
<?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'].' $'.$row['price']."'></td>";
echo "<input type='hidden' name='id[]' value='".$row['id']."'/>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
Any the PHP it is sent to
<?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);
?>
For all my other pages I send the form to JS and use use something like...
xmlhttp.open("GET","myfile.php?a="+val1+"&b="+val2+"&c="+val3+"&d="+val4,true);
xmlhttp.send();
The PHP files saves the data and generates the message for the div. To write to the div...
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
This work well for all my other pages but since I don't know how many fields there will be I can't hard code the xmlhttp.open statement. Not being familiar with jQuery (learning now) or ajax (know just a little more that I do jQuery) I'm not sure how to perform this. I know I need to serialize the data and have done that and sent it to the javascript using
$.each($('#yourform').serializeArray(), function() { console.log(" <" +this.name+ '>' + this.value + "</" + this.name + "> " ); });
but I don't know how to send it to the PHP file to write it to the MySQL db and then send back to update a div on the page. Please give complete code as I have been having lots of problems trying to implement fragments and suggestion so far.
