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

I dont get it. You're talking about a dropdown in a form but you are selecting a table? You're talkig about ajax but dont do any request. So what exactly is your question? — Daniel
– Daniel, Commented Feb 12, 2014 at 22:23
Please consider the fallowing hints : 1. try not to use tables, 2. use a <form> tag, 3. put your php code in a separate file and call it using ajax sending and receiving JSON strings, 4. you put jquery in the tags so use jQuery to manipulate the JSON datas and inject them in the view — Carlo Moretti
– Carlo Moretti, Commented Feb 12, 2014 at 22:23
The script is working fine for me right now but it works only in one row. If I want to use multipe rows to insert in mysql it does not work. The java-script replaces a div with a php file and sending a url variable to the php. When I add another row in the form by onClick="addRow('dataTable')" it just clones the first row and the second DIV will not work. Take a look here dev.storecheck.ro/index2.php (click on "RAFT TAB") — user3303717
– user3303717, Commented Feb 12, 2014 at 22:43
I just want to know how to make function showCateg(str) to work on every new row that I add. — user3303717
– user3303717, Commented Feb 12, 2014 at 22:57

klugerama · Accepted Answer · 2014-02-13 17:32:01Z

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;
    }
[...]

MadeInDreams · Accepted Answer · 2014-02-12 23:10:37Z

0

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!

answered Feb 12, 2014 at 23:10

MadeInDreams

2,1565 gold badges34 silver badges68 bronze badges

2 Comments

user3303717 Over a year ago

Thank you for the reply. The problem is with function showCateg(str). It's not working when I add another row. It will just work on the first row.

user3303717 Over a year ago

Please visit dev.storecheck.ro/index2.php and click on "RAFT" tab. After that chose something from the first dropdown (Brand: Allview). In the right you will get some categories (different from every brand). There's the problem. If I add another row in the table the function that get's the file getcateg.php will not work.

Collectives™ on Stack Overflow

Dynamic php-ajax form

2 Answers 2

The easy way

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

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

The easy way

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

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related