I'm not that advanced in ajax so I've stumbled into this. I have a dynamic form with add/remove rows. In this form I want to have a "dependable drop-down" without refreshing the page so the simplyest way to do it was with JS. The dropdown seems to work just fine with one row of data but when I add another row it doesan't. Is there a way to modify something in order to function properly with a infinite number of rows?
<script>
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 30){
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("Numarul maxim de repere este 30.");
}
}
function deleteRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) { // limit the user from removing all the fields
alert("Nu se pot sterge toate reperele.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}
</script>
<script>
function showCateg(str)
{
if (str=="")
{
document.getElementById("showcateg").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("showcateg").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcateg.php?brand="+str,true);
xmlhttp.send();
}
</script>
<input type="button" class="btn_rosu" onClick="addRow('dataTable')" value="Adauga" />
<input type="button" class="btn_rosu" onClick="deleteRow('dataTable')" value="Elimina" />
<p>(Se elimina numai randurile bifate)</p>
<table id="dataTable" class="bg" border="0">
<tbody>
<tr>
<p>
<td><input name="chk[]" type="checkbox" required class="btn_rosu" checked="checked" /></td>
<td><label>Brand</label>
<select name="BX_BRAND[]" class="btn_gri" required="required" onChange="showCateg(this.value)">
<?php
do {
?>
<option value="<?php echo $row_brand['brand']?>"><?php echo $row_brand['brand']?></option>
<?php
} while ($row_brand = mysql_fetch_assoc($brand));
$rows = mysql_num_rows($brand);
if($rows > 0) {
mysql_data_seek($brand, 0);
$row_brand = mysql_fetch_assoc($brand);
}
?>
</select></td>
<td>
<label for="BX_CATEG">Categ.</label>
<div id="showcateg"></div>
</td>
<td>
<label for="BX_gender">Reper</label>
<select name="BX_REPER[]" class="btn_gri" id="BX_REPER" required="required">
<?php
do {
?>
<option value="<?php echo $row_reper['reper']?>"><?php echo $row_reper['reper']?></option>
<?php
} while ($row_reper = mysql_fetch_assoc($reper));
$rows = mysql_num_rows($reper);
if($rows > 0) {
mysql_data_seek($reper, 0);
$row_reper = mysql_fetch_assoc($reper);
}
?>
</select>
</td>
<td>
<label for="BX_birth">Pret</label>
<input name="BX_PRET[]" type="text" required class="btn_gri" id="BX_PRET" size="5" /></td>
<td>Promo
<label for="select"></label>
<select name="BX_PROMO[]" class="btn_gri" id="select">
<option value="1">Da</option>
<option value="2">Nu</option>
</select></td>
</tr>
</tbody>
</table>
Thank you :)