passing variable sized form using jQuery to PHP file for processing

Question

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'].'&#10;$'.$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.

You may want to investigate jQuery DataTables plug-in. datatables.net — Mike Brant
– Mike Brant, Commented Dec 26, 2012 at 19:44

Teena Thomas · Accepted Answer · 2012-12-26 19:43:52Z

1

Since you don't know the number of inputs, you can use serialize in jquery to serialize the entire form. Here's the manual.

From the manual,

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

This produces a standard-looking query string:

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

answered Dec 26, 2012 at 19:43

Teena Thomas

5,2091 gold badge15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Templeman Over a year ago

So... Looking at the manual I see function showValues() { var str = $("form").serialize(); $("#results").text(str); } In this case I would send the data to the PHP file using this? xmlhttp.open("GET","myfile.php?"+str,true);

Jason Templeman Over a year ago

OK. I have the string but since the fields are all named the same (as they are created via the while loop) what would be the best way to read these into variables in my PHP file?

Collectives™ on Stack Overflow

passing variable sized form using jQuery to PHP file for processing

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related