Question

I am creating a form which fetches the value from the database and stores the value dynamically into a table. I have a button named add which adds a row dynamically when a user press it and I have a hidden counter which counts the rows added.

The problem is, when I fetch the record, the counter shows the number of rows present and when I add a new row it goes back to 1.

If there are two rows in the table, the counter will show 2 but when I try to add a new row the counter shows 1.

Is there any way to set the value from the counter text into the JavaScript variable and increment it?

Here is my JavaScript code:

<script language="javascript" type="text/javascript">
    var jj= 1;
    alert(jj);
    function addRow()
    {
        //alert(jj)
        var tbl = document.getElementById('zimtable');
        var lastRow = tbl.rows.length;
        var iteration = lastRow - 1;
        var row = tbl.insertRow(lastRow);

        var firstCell = row.insertCell(0);
        var el = document.createElement('input');
        el.type = 'text';
        el.name = 'zimname_' + jj;
        el.id = 'zimname_' + jj;
        el.size = 40;
        el.maxlength = 40;
        firstCell.appendChild(el);

        var secondCell = row.insertCell(1);
        var el2 = document.createElement('input');
        el2.type = 'text';
        el2.name = 'zimmob_' + jj;
        el2.id = 'zimmob_' + jj;
        el2.size = 13;
        el2.maxlength = 13;
        secondCell.appendChild(el2);

        // alert(i);
        //$('#hh').val(jj); 
        jj++;
        makhtab.hh.value=jj;

        alert(jj);
    }
</script>

Here is my php code to show the table:

<?php

    $zim = mysql_query("SELECT * FROM `makhzim` WHERE makhcode='$newsid' ORDER BY srno")or die(mysl_error());
    $ctrzim = 0;
    while ($zrow = mysql_fetch_array($zim)){
        $ctrzim++;
        print '<script type="text/javascript">';
        print "alert('$i')";
        print '</script>';
        echo "<tr>";
        echo "<td><input name='zimname_$ctrzim' type='text'  size='40' maxlength='20' value=$zrow[name] /></td>";
        echo "<td><input name='zimmob_$ctrzim'  type='text'   size='13' maxlength='20' value=$zrow[mobile] /></td>";
        echo "</tr>";
    }
    echo "</table>";
    echo "<input type=\"button\" value=\"Add\" onclick=\"addRow();\" /><input id=\"hh\" name=\"hh\" type=\"text\" value= '$ctrzim'/>";
?>

Answer 1

In your php code put the value of the counter to a hidden element

<input type = "hidden"  id = "hiddenElementId" value = "your php counter value"/>

In your javascript

<script>
     var count;
     window.onload=function(){
         count =   =   document.getElementById("hiddenElementId").value;
     };
     function addRow() {
        alert(count);
        ..
        ..
        count++;
      }
<script>