Dynamic php-ajax form

Question

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 :)

Answer 1

Off the top of my head, you have several choices of how to do this.

The easy way

Put the dropdown inside a named <div>:

[...]
            <td><div id="dd_cell"><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></div>
            </td>
[...]

Then in addRow:

[...]
    var firstCell = row.insertCell(0);
    firstCell.innerHTML = $( "#dd_cell" ).clone();
    for(var i=1; i<colCount; i++) { // <-- PAY ATTENTION TO THE "1"!
        var newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
[...]

The harder, slightly more complicated (but maybe more correct) way

Make the dropdown a javascript function:

function makeDropDown() {
    var dd = "<select name=\"BX_BRAND[]\" class=\"btn_gri\" required=\"required\" onChange=\"showCateg(this.value)\">";
<?php
    $rows = mysql_num_rows($brand);
    if($rows > 0) {
        mysql_data_seek($brand, 0);
        while ($row_brand = mysql_fetch_assoc($brand)) {
?>
    dd += "<option value='\"<?php echo $row_brand['brand']?>'\"><?php echo $row_brand['brand']?></option>";
<?php
        }
    }
?>
    dd += "</select>";
    return dd;
}

Then replace (in the table part):

[...]
            <td><div id="dd_cell"><label>Brand</label>
                <script type="text/javascript">
                    document.write(makeDropDown());
                </script></div>
            </td>
            <td>
                <label for="BX_CATEG">Categ.</label>
[...]

And finally in function addRow(tableID):

[...]
    var newcell = row.insertCell(0);
    newcell.innerHTML = makeDropDown();
    for(var i=1; i<colCount; i++) {
        newcell = row.insertCell(i);
        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    }
[...]

Answer 2

From the code i see i will take a wild guess and say that the ID is the problem

1 becuse you get the same id everytime and 2 becuse you delette all new entry at once.

The function

addRow(tableID) 

Will insert the row with the ID dataTable becuse the button says

<input type="button" class="btn_rosu" onClick="addRow('dataTable')" value="Adauga" /> 

And nothing make that buttons value change so you keep adding datatable id;

A way to fix this could be to use the row as an array

var rowNum;

var thisID = dataTable[rowNum];

rowNum ++ ;

Your data probably comes from a datbase make sur you got the array right!