Checkbox in a dynamic table with dynamic input fields

Question

I have a table with dynamic values and hidden input fields and dynamic checkbox. Checkboxes have same class names. When i click on a particular checkbox i want the input values from that particluar row should be sent to ajax.

Below is the code for dynamic table,

<table  id="table">
<thead>
<tr>
<th >Sl.no</th>
<th >Owner Name</th>
<th >Contact Number</th>
<th class="text-center" data-title="Action">Action</th>
</tr>
</thead>
<tbody id="responsive-table-body">
<?php 
$owner=mysql_query("select id,tmp_id,name,phone,activate from pgowner where active='1'");
if(mysql_num_rows($owner)){
$i=0;
while($owner1=mysql_fetch_array($owner)){
$id=$owner1['tmp_id'];
?>
<tr>
<td><span class="label label-default"><?php echo ++$i; ?></span></td>
<td>
<a href='viewprofile?id=<?php echo $id; ?>' target='_blank' style='color:blue;text-decoration:underline;'><?php echo $owner1['name']; ?></a>
<input type="hidden" name="ownerid" value="<?php echo $owner1['tmp_id']; ?>" id="ownerid" />
</td>
<td>
<?php echo $owner1['phone']; ?>         
</td>
<td>
<input type="checkbox" name="activate[]" class="activate" id="activate" />
</td>
</tr>
<?php }  }
    ?>                
</tbody>
</table>

Here's the ajax code to fetch the value from the row in which checkbox is checked.

<script type="text/javascript">

$(document).ready(function(){
$('#activate').click(function(){

var ownerid=$('#ownerid').val();
var myonoffswitch=$('#activate').val();

if ($("#activate:checked").length == 0)
{
var a='0';
}
else
{
var a="1";
}
$.ajax({
type: "POST",
url: "profileactivation",
data: "value="+a +"&ownerid="+ownerid,
success: function(html){
alert("Successfully Done");
}
});
});
});
</script>

I am not able to fetch the input value from the row in which checkbox is checked. Please help.

Generated HTML looks like this,

<table id="table" >
<thead>
<tr>
<th >Sl.no</th>
<th >Owner Name</th>
<th >Contact Number</th>
<th >Action</th>
</tr>
</thead>
<tbody id="responsive-table-body">
<tr >
<td ><span class="label label-default">1</span></td>
<td>
<a href="viewprofile?id=EdXzrq" target="_blank" style="color:blue;text-decoration:underline;">Name1</a>
<input type="hidden" name="ownerid" value="EdXzrq" id="ownerid">
</td>
<td>
9731269342          
</td>
<td>
<input type="checkbox" name="activate[]" class="activate" id="activate">
</td>
</tr>
<tr >
<td ><span class="label label-default">2</span></td>
<td>
<a href="viewprofile?id=RowMpg" target="_blank" style="color:blue;text-decoration:underline;">Name2</a>
<input type="hidden" name="ownerid" value="RowMpg" id="ownerid">
</td>
<td>
7760807087          
</td>
<td>
<input type="checkbox" name="activate[]" class="activate" id="activate">
</td>
</tr>
</tbody>
</table>

Can you share the generated html

Arun P Johny
– Arun P Johny

2016-03-23 06:44:08 +00:00
Commented Mar 23, 2016 at 6:44 — Arun P Johny
– Arun P Johny, Commented Mar 23, 2016 at 6:44

Arun P Johny · Accepted Answer · 2016-03-23 06:48:41Z

There are multiple issues.

Since you have the controls in a loop, using ID will create multiple elements with same ID which is invalid, instead use class or other selectors like attribute selector to select elements.

<input type="checkbox" name="activate[]" class="activate" />
<input type="hidden" name="ownerid" value="<?php echo $owner1['tmp_id']; ?>" />

then use a class selector to register the click hanlder and then find the owner id in the same row as given below

$(document).ready(function() {
  $('.activate').click(function() {
    var ownerid = $(this).closest('tr').find('input[name="ownerid"]').val();
    var a = this.checked ? 1 : 0;

    $.ajax({
      type: "POST",
      url: "profileactivation",
      data: {
        value: a,
        ownerid: ownerid
      },
      success: function(html) {
        alert("Successfully Done");
      }
    });
  });
});

Collectives™ on Stack Overflow

Checkbox in a dynamic table with dynamic input fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related