Menu
I am trying to get the following:
Add a new row to a table on demand (done)
In this row there should be two select boxes
– the first is populated by PHP (done)
– the second is populated by the option selected in the first (not done)
– as there could be (in theory) infinite rows, these would need to be as an array… but I am not sure how to relate to these…
any ideas?
code is as below:
[code]
<html>
<HEAD>
<?php
include(“db.php”);
$query=do_query(“SELECT company FROM `suppliers`”);
while(list($company)=mysql_fetch_row($query))
{
$query=do_query(“SELECT ref,productname,modelnumber,ordered_ph,instock,minstock FROM `”.$company.”`”);
while(list($ref,$product,$model,$ordered,$instock,$minstock)=mysql_fetch_row($query))
{
@$array .=”””.$company.””,””.$model.” – “. $product.””,”;
}
}
$array=substr($array,0,-1);
?>
<SCRIPT LANGUAGE=”JavaScript”>
var supplier_toCategoryMap = new Array(
<? echo $array;?>);
function supplier_popCategory(supplier, category) {
var manCode = supplier.options[supplier.selectedIndex].value;
var i, j;
j = category.options.length = 1;
category.options.selectedIndex = 0;
for(i=0; i<supplier_toCategoryMap.length/4; i++) {
if (supplier_toCategoryMap[i*4] == manCode) {
category.options.length = j+1;
category.options[j].value = supplier_toCategoryMap[i*4+2];
category.options[j].text = supplier_toCategoryMap[i*4+1];
j += 1;
}
}
return;
}
<!– begin
function addRow(id){
var tbody = document.getElementById
(id).getElementsByTagName(“TBODY”)[0];
var row = document.createElement(“TR”);
var td1 = document.createElement(“TD”);
var newForm = document.createElement(‘select’);
newForm.setAttribute(‘name’,’supplier[]’);
newForm.setAttribute(‘class’,’textbox’);
newForm.setAttribute(‘onChange’, ‘supplier_popCategory(this, document.form1.category)’);
newOpt = document.createElement(“option”);
newOpt.setAttribute(“value”, “”);
newOpt.appendChild( document.createTextNode(“– choose one –“) );
newForm.appendChild(newOpt);
<?
$query=do_query(“SELECT company FROM `suppliers`”);
while(list($supplier)=mysql_fetch_row($query))
{
?>
newOpt = document.createElement(“option”);
newOpt.setAttribute(“value”, “<?echo $supplier;?>”);
newOpt.appendChild( document.createTextNode(“<?echo $supplier;?>”) );
newForm.appendChild(newOpt);
<?
}
?>
td1.appendChild(newForm);
var td2 = document.createElement(“TD”)
var newForm = document.createElement(‘select’);
newForm.setAttribute(‘name’,’category[]’);
newForm.setAttribute(‘class’,’textbox’);
newOpt = document.createElement(“option”);
newOpt.setAttribute(“value”, “”);
newOpt.appendChild( document.createTextNode(“– choose one –“) );
newForm.appendChild(newOpt);
td2.appendChild(newForm);
row.appendChild(td1);
row.appendChild(td2);
tbody.appendChild(row);
}
// End –>
</script>
</HEAD>
<BODY>
<a href=”javascript:addRow(‘myTable’)”>Add row</a>
<form name=”form1″ method=”POST” action=”answers.php”>
<input type=”submit” name=”submit” value=”submit”>
<table id=”myTable” cellspacing=”0″ border=”1″>
<tbody>
<tr>
<th>Supplier</th><th>Product</th>
</tr>
</tbody>
</table>
</form>
</body>
</html>