CODEWITHSUNDEEP
javascriptjqueryhtmlcodeigniter-2html-table
Rahat Islam Khan
Rahat Islam Khan

Reputation: 135

trouble cloning table row with dependent dropdowns list

i have a table with dependent drop down list.when i select the first row it is giving my the value of selected item but when i add more rows and select a item from drop down it gives me the value of the first row.

here is my js code code for cloning row

  <script type="text/javascript">
$(document).ready(function() {
    $("#add").click(function() {
      $('#products tbody>tr:last').clone(true).insertAfter('#products tbody>tr:last');
        //$("#products tbody>tr:last").each(function() {this.reset();});  
      return false;
    });
});

here is my showdata() function

function showData(str){
var e = document.getElementById("pid[]");
var pid = e.options[e.selectedIndex].value;
//xmlhttp.open("GET","viewData?nid="+str+"&pid="+pid,true);
//xmlhttp.send();
alert(pid);}

here is my html code

<table id="products" align="center" class="bordered">
<thead>
    <tr><th>Item Name</th>
    <th>Action</th></tr>
</thead>
<tbody>
    <tr>
        <td><?php echo form_dropdown('product',$product,null,'id="pid[]" onChange="showData(this.value);"');?></td>
        <td>
            <button id="add">+</button>
        </td>
    </tr>
</tbody>

Upvotes: 0

Views: 947

Answers (2)

kp singh
kp singh

Reputation: 1460

when you are cloning the last tr, It is also clone the id of button.So that when you click on the second button, it is referring the first id. Id shouldn't be same as per w3c recommendation. In your code id and class is not required for the button and dropdown check this jsfiddle

http://jsfiddle.net/v4nAa/

and also you can refer the below code for dropdown no need of showData() function

$("#products tbody>tr").on('change','select',function() {
 var pid = $(this).val();
 //xmlhttp.open("GET","viewData?nid="+str+"&pid="+pid,true);
 //xmlhttp.send();
 alert(pid);
});

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try to use on() for dynamically added elements like,

$('#products').on('change','#pid[]', function(){ // use class instead of id #pid[]
    alert('id'+this.value);
});

Upvotes: 0

Related Questions