Question

There is one table that have fields included the add row button. I am using onchange event to call data from other tables, so when I select an option in the option box can automatically get the value that has been selected earlier (do not need input the value manually).
Then I add row in the same table and after that I select one option back in the box option and get different values ​​from the first, the problem is the values ​​obtained appear in the first box, not in the second box.

For the html example:

<table id="table">
    <tr>
        <td>No</td>
        <td>Name</td>
        <td>Class</td>
        <td>Point</td>
        <td>Action</td>
    </tr>
    <tr>
            <td>1</td>
        <td><select name="name">
            <option value="#">&nbsp;</option>
            <?php
                    opendb();
                $query = "SELECT * FROM student";
                $result = mysql_query($query);
                while($data = mysql_fetch_array($result)){
                    $ID = $data['ID'];
                    $Name = $data['Name'];
                    echo "<option value='$ID'>$Name</option>";
                }
            ?>
             </select>
        </td>
        <td><select name='class' onchange="choosepoint(this);">
            <option value="#">&nbsp;</option>
            <?php
                    opendb();
                $query = "SELECT * FROM student2";
                $result = mysql_query($query);
                while($data = mysql_fetch_array($result)){
                        $ID1 = $data['ID'];
                    $class = $data['Class'];
                    echo "<option value='$ID'>$class</option>";
                }
            ?>
            </select>
        </td>
        <td>
                <div id="point" name="point"></div>
            </td>
            <td><input type="button" value=" + " onClick="addRowToTable();"> | <input type="button" value=" - " onClick="removeRowFromTable();"></td>
    </tr>
</table>

What I was searching, the problem I found here:

function choosepoint(combobox)
{
    var kode = combobox.value;
    if (!kode) return;
    xmlhttp.open('get', '../template/get_point.php?kode='+kode, true);
    xmlhttp.onreadystatechange = function() {
        if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
        {
             document.getElementById("point").innerHTML = xmlhttp.responseText;
        }
        return false;
    }
    xmlhttp.send(null);
}

If the ID name “point” changed to “point2” then the value will appear in the second box, but the value in the first box missing.

So I tried looping to get the value of the ID name to be point, point2, point3 etc. (depending on how many want to add the rows).

function choosepoint(combobox)
{
    var kode = combobox.value;
    if (!kode) return;
    xmlhttp.open('get', '../template/get_point.php?kode='+kode, true);
    xmlhttp.onreadystatechange = function() {
        if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
        {
             Var tbl = document.getElementById("table");
             var r = tbl.length;
             var i = r;
             document.getElementById("point"+ i).innerHTML = xmlhttp.responseText;
        }
        return false;
    }
    xmlhttp.send(null);
}

The results I’ve got is null or no values, cannot run or not get the value to be point, point2, point3 etc.
Is there any wrong script that I’ve made? Need a big help m(_ _)m.

Thanks.

Update: This’s for the solved.

function choosepoint(combobox)
{
    var kode = combobox.value;
    if (!kode) return;
    xmlhttp.open('get', '../template/get_point.php?kode='+kode, true);
    xmlhttp.onreadystatechange = function() {
        if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
        {
            var tbl = document.getElementById("table");
        var r = tbl.rows.length;
            var add = document.getElementById("point"+r);

        add.innerHTML = xmlhttp.responseText;
        }
        return false;
    }
    xmlhttp.send(null);
}

Answer 1

In your code you given the id for the table as “table” and then you have accessed “document.getElementById(‘table’)” and then you have used “tbl.length” which resulted in null or no value. The problem here is that when you use getElementById you don’t have the property “length”. In order to access the number of tables use the following

<table name="table">
and then
tbl = document.getElementById('table')
r = tbl.rows.length; //This will give you the row length.
function choosepoint(combobox)
{
    var kode = combobox.value;
    if (!kode) return;
    xmlhttp.open('get', '../template/get_point.php?kode='+kode, true);
    xmlhttp.onreadystatechange = function() {
        if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
        {
             Var tbl = document.getElementById('table')
             var r = tbl.rows.length;
              alert(document.getElementById("point"+r));//This should be object. If undefined then you don't have any element.
              **//Edit Part**
              if(document.getElementById("point"+r))
                 document.getElementById("point"+r).innerHTML = xmlhttp.responseText;
              else
              {
                  var cellRight = row.insertCell(3);//The cell or column number can be any here am using it as third column.
                  var div = document.createElement('div');
                  div.id = 'point' + r;
                  cellRight.appendChild(div);
                  cellRight.innerHTML = xmlhttp.responseText;
              }
             **//Till Here**
        }
        return false;
    }
    xmlhttp.send(null);
}

Hope this helps.