Add/Remove Rows Dynamically with drop down list in html table using php

Here Is My Code. I want to give and get the id of drop down list. Can Anyone Help?

Dropdowndesign.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="ddljs1.js">
</script>

</head>

<body>
    <form>
        <table border="1" id="tblSample">
            <tr>
                <th>Name</th>
                <th>Add Field</th>
            </tr>
            <tr>
                <td>
                    <div id="emp">
                    <select id="namesel">
                    <option>Select Name</option>
                          <?php
                          include("db.php");
                            $result=mysql_query("select * from test");
                            while($row=mysql_fetch_assoc($result))
                            {
                                echo "<option>".$row['Name']."</option>";
                            }                       
                        ?>                    
                    </select>
                    </div>
                </td>
                <td><input type="button" value="Add" id="nameselbtn" onclick="javascript:addrow();" /></td>
            </tr>
         </table>
     </form>
</body>
</html>

dropdownjavascript.js

var xmlHttp
xmlHttp=GetXmlHttpObject()

var divid="";
function addrow()
{
    var tbl = document.getElementById('tblSample');
    var lastRow = tbl.rows.length-1;
var iteration = tbl.tBodies[0].rows.length;
    var row =tbl.tBodies[0].insertRow(-1);
var cellRightSel = row.insertCell(0);
    var di1=document.createElement('div');
    di1.id= 'emp' + iteration;
var newCell1 = row.insertCell(1);
    var el1 = document.createElement('input');
    el1.type = 'button';
    el1.value= 'Add';
    el1.id = 'nameselbtn' + iteration;
el1.onclick = addrow;
    newCell1.appendChild(el1);
    cellRightSel.appendChild(di1);
    cellRightSel.appendChild(showEmp(di1.id));

}
function showEmp(str)
{
    if (typeof XMLHttpRequest != "undefined")
        xmlHttp= new XMLHttpRequest();
    else if (window.ActiveXObject)
        xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
    if (xmlHttp==null)
    {
        alert("Browser does not support XMLHTTP Request")
        return;
    } 
    xmlHttp.onreadystatechange = function()
                                        {   
                                            if(xmlHttp.readyState==4)
                                            document.getElementById(str).innerHTML=xmlHttp.responseText   
                                        }
    xmlHttp.open("GET", "ddl_code.php?q="+str, true);
    xmlHttp.send(null);

}

dropdowncode.php

<?php
    $buffer="";
    echo '<select name="emp"><option>Select</option>';
    include('db.php');
    $result=mysql_query("select * from test");
    while($row=mysql_fetch_array($result))
    {
        echo "<option>".$row['Name']."</option>";
    }
    echo "</select>";
?>

View Answers

January 7, 2012 at 3:58 PM

Please visit the following link:

JSP Add Remove row using Javascript

January 17, 2012 at 5:16 PM

so simple..

first display all record in drop down menu.. using php. its easy..

then in second page u just show all the record from the db which is u showing in dropdown menu. in this list display two options Update and Delete. when u click Update it will display record below in text box and update button. and when u click Delete record will be delete.

when u c the dropdonw menu u can c the dynamically changed..

its easy..

January 18, 2012 at 11:06 AM

got it. waiting your reply.....