Dynamically Adding Elements to table using ajax

Question

When we are selecting a element from a dropdownlist it will display the value of that element but after that when we choose the next element from that dropdownlist it must display the value below the previous element.

I have done it till displaying the element but when next element is clicked the first one is not displaying.

Please help me to sort this out. I have created my code using HTML, AJAX and PHP.

<?php
    $q = intval($_GET['q']);
    $con = mysql_connect("localhost", "root", "", "registration");
    if (!$con)
    {
        echo "Connection Failed..";
        echo mysql_error($con);
    }
    $sql = "select * from dynamic where Id='".$q."'";
    $result = mysql_query($con, $sql);
    echo "<table border=3 bordercolor='pink' width=100 height=100>  
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Fathername</th>
            <th>Age</th>
            <th>Gender</th>
            <th>Address</th>
        </tr>";
    while ($row = mysql_fetch_array($result))
    {
        echo "<tr>";
        echo "<td>".$row["Id"]."</td>"; 
        echo "<td>".$row["Name"]."</td>";
        echo "<td>".$row["Fathername"]."</td>";
        echo "<td>".$row["Age"]."</td>";
        echo "<td>".$row["Gender"]."</td>";
        echo "<td>".$row["Address"]."</td>";
        echo "</td>";
    }
    echo "</tables>";
    mysql_close($con);
?>

<html>
    <head>
        <script>
            function test(str) {
                if (str == "") {
                    document.getElementById("tst").innerHTML="";
                }
                else {
                    if(window.XMLHttpRequest) {
                        xml = new XMLHttpRequest();
                    } else {
                        xml = new ActiveXObject("Microsoft.XMLHttp");
                    }

                    xml.onreadystatechange = function() {
                        if (xml.readyState == 4 && xml.status == 200) {
                            document.getElementById("tst").innerHTML = xml.responseText;
                        }
                    }
                    xml.open("GET", "mysqlajax.php?q=" + str, true);
                    xml.send();
                }
            }
        </script>

    <body>
        <form>
            <select name="User" onchange="test(this.value)">
                <option value="">-Select user-</option>
                <option value="1">a</option>
                <option value="2">b</option>
                <option value="3">c</option>
                <option value="4">S</option>
                <option value="5">G</option>
                <option value="6">S</option>
            </select>
        </form><br>
        <b><div id="tst"></b></div>
    </body>
</html>

edit and paste your code please. Also try to use 'append()' function to remain first value. — Shahzad Barkati
– Shahzad Barkati, Commented Jun 18, 2015 at 8:38

halfer · Accepted Answer · 2015-06-23 07:14:31Z

Instead of overwriting innerHTML, try to append to it.

Try something like this:

HTML:

<html>
<head>
<script>

function test(str)
{

if(str=="")
{
document.getElementById("tst").innerHTML="";
}
else
{
if(window.XMLHttpRequest)
{
xml=new XMLHttpRequest();

}
else
{
xml=new ActiveXObject("Microsoft.XMLHttp");
}
xml.onreadystatechange=function()
{
    if(xml.readyState == 4 && xml.status== 200)
    {
    var innerHTML = document.getElementById("tst").innerHTML;
    innerHTML += xml.responseText;
    document.getElementById("tst").innerHTML=innerHTML;
    }
}
xml.open("GET","mysqlajax.php?q="+str,true);
xml.send();
}
}
</script>
<body>
<form>
<select name="User" onchange="test(this.value)">
<option value="">-Select user-</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">S</option>
<option value="5">G</option>
<option value="6">S</option>
</select>
</form><br>
<b>
<div id="tst"></div>
</body>
</html>

PHP:

<?php
$q=intval($_GET['q']);

//$con=mysql_connect("localhost","root","","registration");
//if(!$con)
//{
//echo "Connection Failed..";
//echo mysql_error($con);
//}
//$sql="select * from dynamic where Id='".$q."'";
//$result=mysql_query($con,$sql);

echo "<table border=3 bordercolor='pink' width=100 height=100>  
<tr>
<th>Id</th>
<th>Name</th>
<th>Fathername</th>
<th>Age</th>
<th>Gender</th>
<th>Address</th>
</tr>";

//while($row=mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>".rand()."</td>"; 
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "<td>".rand()."</td>";
echo "</td>";
echo "</tr>";
}

echo "</table>";


//mysql_close($con);
?>

Response will be:

Screenshot

I've modified your PHP script to run in my local machine, you can re-enable those code and try. If you try sending "table" as a response from PHP script, every time when you append that to your HTML will add a new table. Instead, you should have the table once and add rows to it.
I have tried using the logic you said but still its repeating the same. Do check once and tel me.!!

Collectives™ on Stack Overflow

Dynamically Adding Elements to table using ajax

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related