Question posted in
You can find the official documentation here.

when checkbox is checked not able to fetch data that are against that checkbox – Jquery ajax

I have data that is displayed in the form of a table and each row has a checkbox.
I am trying to fetch the data of each row when the checkbox is clicked against that row.

<tr>
    <td><input type="text" name="child_name"></td>
    <td><input type="text" name="child_age"></td>
    <td><input type="checkbox" ></td>
</tr>
<tr>
    <td><input type="text" name="child_name"></td>
    <td><input type="text" name="child_age"></td>
    <td><input type="checkbox" ></td>
</tr>

These will get generated dynamically, so the naming needs to same for the input box, however when i am fetching the value typed by the user,it fetches the value of only first row, and the values is getting repeated multiple times

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            $tr = $(this).closest('tr');
            var arr = [];
            var data = $tr.children("td").map(function(){
                
                var one = $("[name='child_name']").val();
                var two = $("[name='child_age']").val();
                
                arr.push(one)
                arr.push(two)
                return arr;

                
                
            }).get();

            console.log(data);
            $('#post-result').append(data);
        }
        else if($(this).prop("checked") == false){
            console.log("Checkbox is unchecked.");
        }
    });
});

Can anyone please tell how to resolve the issue

Tags:

2

Answers


  1. 0

    You can use the context parameter of $(selector [, context]) to only search inside the current <tr>:

    $(document).ready(function() {
  $('input[type="checkbox"]').click(function() {
    if ($(this).prop("checked") == true) {
      $tr = $(this).closest('tr');
      var arr = [];

      var one = $("[name='child_name']", $tr).val();
      var two = $("[name='child_age']", $tr).val();

      arr.push(one)
      arr.push(two);

      console.log(arr);
      $('#post-result').append(arr);
    } else if ($(this).prop("checked") == false) {
      console.log("Checkbox is unchecked.");
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="text" name="child_name" value="A Name"></td>
    <td><input type="text" name="child_age" value="A Age"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td><input type="text" name="child_name" value="B Name"></td>
    <td><input type="text" name="child_age" value="B Age"></td>
    <td><input type="checkbox"></td>
  </tr>
</table>
<pre id="post-result"></pre>
    Login or Signup to reply.
  2. 0

    The name attribute in this case could complicate things a little bit. What I would do is use data-attributes to have specific identifiers for each row. Something like this:

    UPDATED

    I changed the behavior to work with dynamically added rows.

    Using $(document).on("click"... you can affect future elements of the same type while $("[type='checkbox']").click() works only for currently existing elements.

    I also took some liberty in expanding the example.

    var children = [];

$(document).on("click", ".child-selector", function() {
  var id = $(this).data("id");
  
  if($(this).is(":checked")) {
      
      var info = [];
      info.push($(".child-name[data-id='"+ id +"']").val());
      info.push($(".child-age[data-id='"+ id +"']").val());
      
      console.log(info);
      
      // An example of using objects to give some structure to the data
      // and then store it to an array with all the checked rows
      var child = {};
      child.id = id;
      child.name = $(".child-name[data-id='"+ id +"']").val();
      child.age = $(".child-age[data-id='"+ id +"']").val();
      
      children.push(child);
      
      console.log(children);
   } else {
      console.log("Checkbox is unchecked.");
      
      // An example of removing the specific children from the array
      children.forEach(function(child, index) {
        if(child.id == id) {
          children.splice(index, 1);
        }
      });
      console.log(children);
   }
});

var clickCounter = 0;
var dataCounter = 13;

$("#add-child").click(function() {
   var html = '<tr>'+
              '<td><input type="text" class="child-name" data-id="'+ dataCounter +'" value="Child '+ clickCounter +'"></td>'+
              '<td><input type="text" class="child-age" data-id="'+ dataCounter +'" value="'+ clickCounter +'"></td>'+
              '<td><input class="child-selector" type="checkbox" data-id="'+ dataCounter +'"></td>'+
              '</tr>';
   $("table").append(html);
   clickCounter++;
   dataCounter++;
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
      <td><input type="text" class="child-name" data-id="9" value="John Connor"></td>
      <td><input type="text" class="child-age" data-id="9" value="12"></td>
      <td><input class="child-selector" type="checkbox" data-id="9"></td>
  </tr>
  <tr>
      <td><input type="text" class="child-name" data-id="10" value="Jane Connor"></td>
      <td><input type="text" class="child-age" data-id="10" value="12"></td>
      <td><input class="child-selector" type="checkbox" data-id="10"></td>
  </tr>
  <tr>
      <td><input type="text" class="child-name" data-id="11" value="Tom Connor"></td>
      <td><input type="text" class="child-age" data-id="11" value="13"></td>
      <td><input class="child-selector" type="checkbox" data-id="11"></td>
  </tr>
  <tr>
      <td><input type="text" class="child-name" data-id="12" value="T800"></td>
      <td><input type="text" class="child-age" data-id="12" value="1"></td>
      <td><input class="child-selector" type="checkbox" data-id="12"></td>
  </tr>
</table>

<button type="button" id="add-child">Add Child</button>

    Now, if you need to send the data via post you should review your usage of name because as it currently is it would only send one value.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search