Post Javascript Form into mysql - php

Question

I'm working on an invoicing system. I'm using javascript to add line items as needed however the added line items are not posting when I click submit. I'm thinking it is probably an issue with div somewhere but I cannot seem to find it or get it to work. I'm posting my code for help. Thanks.
Here is my form.
<?php
include $_SERVER['DOCUMENT_ROOT']."/connect.php";
include $_SERVER['DOCUMENT_ROOT']."/includes/header.php";
$result = mysql_query("SELECT company, first, last FROM customer") or die (mysql_error());
?>
<script type="text/javascript">
var counter = 1;
function addInput(div){
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
var newdiv = document.createElement('div');
newdiv.innerHTML = " Entry " + (++counter) + " <br /><table><tr><td>Item: <select name='item[]'>" + xmlhttp.responseText + "</select></td><td>Qty: <input name='quantity[]' type='text' size='5' /></td></tr></table><br />";
}
document.getElementById(div).appendChild(newdiv);
}
xmlhttp.open("GET", "dropdownquery.php", false);
xmlhttp.send();
}
</script>
<form id="createInvoice" method="post" action="docreateinvoice.php">
<table>
<tr><td>Customer</td><td><select name="company">
<?php while($row = mysql_fetch_array($result)) {
echo "<option value=\"".$row['company']."\">".$row['company']." (".$row['first']." ".$row['last'].")</option>";
}
?>
</select></td></tr>
</table>
</div>
</div>
<div id="container">
<div class="content">
<div id="dynamicInput">
Entry 1<br /><table><tr><td>Item: <select name="item[]"><?php $result = mysql_query("SELECT * FROM salesitem"); while($row = mysql_fetch_array($result)) { echo "<option value=\"".$row['name']."\">".$row['name']."</option>";} ?></select></td><td>Qty: <input name="quantity[]" type="text" size="5" /></td></tr></table><br />
</div>
<br /><input type="button" value="Add Line Item" onClick="addInput('dynamicInput');">
</div>
</div>
<div id="container">
<div class="content">
<input type="submit" name="submit" value="Create Invoice" />
</form>
<?php
include $_SERVER['DOCUMENT_ROOT']."/includes/footer.php";
?>
This next piece of code is dropdownquery.php. This is what gets the dropdown box data in the javascript. Big thanks to #NickSlash for figuring this out in the javascript.
<?php
include $_SERVER['DOCUMENT_ROOT']."/connect.php";
$result = mysql_query("SELECT * FROM salesitem");
while($row = mysql_fetch_array($result)) {
echo "<option value=\"".$row['name']."\">".$row['name']."</option>";
}
?>
And finally, this is my docreateinvoice.php which I post to.
<?php
include $_SERVER['DOCUMENT_ROOT']."/connect.php";
$company = mysql_real_escape_string($_POST['company']);
foreach($_POST['item'] as $i => $item)
{
$item = mysql_real_escape_string($item);
$quantity = mysql_real_escape_string($_POST['quantity'][$i]);
//mysql_query("INSERT INTO invoice (company, item, quantity) VALUES ('$company', '".$item."', '".$quantity."') ") or die(mysql_error());
print_r ($company);
print_r ($item);
print_r ($quantity);
}
//echo "<br><font color=\"green\"><b>Invoice added</b></font>";
?>
You might notice in the form that the first entry is not javascript. This does indeed post, just not any additional line items generated from the javascript function.
Thanks for any help.

Answer 1

As I had said in the comments, it seems having divs for display formatting purposes has a negative effect when used within forms utilizing javascript.