title: passing variable sized form using jQuery to PHP file for processing
body: <p>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.</p>
  
  <pre><code>&lt;?php include("./db/db_connect.php"); ?&gt;
  &lt;form method="POST" action="fixcon.php"&gt;
  &lt;?php
  $sql = "SELECT * FROM concessions ORDER BY button ASC ";
  $result = mysql_query($sql);
  echo "&lt;table border='1' id='table'&gt;
  &lt;tr&gt;
  &lt;td align='center'&gt;Button #&lt;/td&gt;
  &lt;td align='center'&gt;Item&lt;/td&gt;
  &lt;td align='center'&gt;Price&lt;/td&gt;
  &lt;td align='center'&gt;Button&lt;/td&gt;
  &lt;/tr&gt;";
  
  while($row = mysql_fetch_array($result)) {
    echo "&lt;tr&gt;";
    echo "&lt;td&gt;&lt;input type='text' name='btn[]' size='5' value='".$row['button']."'/&gt;&lt;/td&gt;";
    echo "&lt;td&gt;&lt;input type='text' name='itm[]' size='5' value='".$row['item']."'/&gt;&lt;/td&gt;";
    echo "&lt;td&gt;&lt;input type='text' name='prc[]' size='5' value='".$row['price']."'/&gt;&lt;/td&gt;";
    echo "&lt;td&gt;&lt;input type='button' class=myButton name='button01' value='".$row['item'].'&amp;#10;$'.$row['price']."'&gt;&lt;/td&gt;";
    echo "&lt;input type='hidden' name='id[]' value='".$row['id']."'/&gt;";
    echo "&lt;/tr&gt;";
  }
    echo "&lt;/table&gt;";
    mysql_close($con);
    ?&gt;
  </code></pre>
  
  <p>Any the PHP it is sent to</p>
  
  <pre><code>&lt;?php include("./db/db_connect.php"); ?&gt;
  &lt;?php
  $buttonArray = $_POST['btn'];
  $itemArray = $_POST['itm'];
  $priceArray = $_POST['prc'];
  $idArray = $_POST['id'];
  
  $numberofItems = count($itemArray);
  
  for ($i=0; $i&lt;$numberofItems; $i++) {
   $sql = "UPDATE concessions SET button = '".$buttonArray[$i]."', item = '".$itemArray[$i]."', price = '".$priceArray[$i]."' WHERE id = '".$idArray[$i]."'";
   mysql_query($sql);
  }
  
  echo "&lt;b&gt;User updated&lt;/b&gt;";
  mysql_close($con);
  ?&gt;
  </code></pre>
  
  <p>For all my other pages I send the form to JS and use use something like...</p>
  
  <pre><code>xmlhttp.open("GET","myfile.php?a="+val1+"&amp;b="+val2+"&amp;c="+val3+"&amp;d="+val4,true);
  xmlhttp.send();
  </code></pre>
  
  <p>The PHP files saves the data and generates the message for the div. To write to the div...</p>
  
  <pre><code>xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  </code></pre>
  
  <p>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</p>
  
  <pre><code>$.each($('#yourform').serializeArray(), function() { console.log(" &lt;" +this.name+ '&gt;' + this.value + "&lt;/" + this.name + "&gt; " ); });
  </code></pre>
  
  <p>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. </p>