Checkbox function inside table not working

I have a table and inside every row there is a checkbox with ID “checkbox”

Why is the following function not working where im testing for each checkbox click:

 $("#checkbox").on('change', function() { .... }

Is it because there are multiple instances of #checkbox? If this is the case how do I overcome this problem?

thanks

Yes, you’re probably using an id multiple times for each checkbox and that is not valid HTML as any HTML page should only contain one id of each kind. You should instead use classes and target them through $('.checkbox')

1 Like

I just added a class=“checkbox” to each row and changed the function to

$(".checkbox").on(‘change’, function() { … }

But no go…still not working

Can’t remember how jQuery handles this but you probably need a loop to set those event listeners:

var checkboxes = $(".checkbox");
console.log('checkboxes found:', checkboxes.length);
for(var i = 0; i < checkboxes.length; i++) {
    $(checkboxes[i]).on('change', function(event) {
        console.log("I have been clicked");
    });
}
1 Like

When I use your code above the console tells me there are zero checkboxes.

So I think the reason is that I hide the checkboxes with display NONE. Once I click on a row
a second row becomes visible and this row contains the checkbox.
Could it be that the DOM does not recognize the checkbox?

With display:none the checkbox is still physically present so that would not be the reason. It is probably that you are running that JavaScript even before the checkboxes have rendered. You can do one of two things:

  1. add your script after the table HTML
  2. wrap your code in an on document ready event listener:
$( document ).ready(function() {
  var checkboxes = $(".checkbox");
  console.log('checkboxes found:', checkboxes.length);
  // You may not need to run the loop so this may suffice: $(".checkbox").on('change' ...
});
1 Like

Still not working but thank you for your help. Here is the code. The getNewSubmissions is the function that creates the table through ajax etc.

$(document).ready(function() {
getNewSubmissions(pageNum);

var checkboxes = $(".checkbox");
console.log('checkboxes found:', checkboxes.length);
for(var i = 0; i < checkboxes.length; i++) {
$(checkboxes[i]).on('change', function(event) {
    console.log("I have been clicked");
});

}

One thing Ive tried is to take the checkbox and place it OUTSIDE the table…and then it works. Ofcourse this is not the solution since I need it inside each row

That must be the issue, you need to run the code after the AJAX callback has rendered the table, so you could have another method called initializeTable that you call once the AJAX script has fetched the results and rendered the table.

Ok so you mean I should create this method in the RESPONSE section of my ajax call? If so…how do I initialize the table? How do I make this work:

$(".checkbox").on(‘change’, function() {…}

ok so placing this line in my response…gives me a result of 10 checkboxes

var checkboxes = $(".checkbox");
console.log(‘checkboxes found:’, checkboxes.length);

So I def need to wait for the table to display first

This function will be making an AJAX call to a server. AJAX calls are asynchronous, which means you don’t know exactly the point in time where you are going to get a response from the server. It might take one second or ten seconds. That’s why AJAX calls provide a callback function, which is called after the server responds with some content. So if you inspect what getNewSubmissions is doing you will probably find a callback function that receives the data the server responded with. This is the data that is used to build the table so it is probably that callback function that will be building the table and attaching it to the document. You need to run your code right after the HTML table is attached to the HTML document, presumably within that AJAX callback function.

Hope it helped

1 Like

thank you so much

1 Like

Thank you its finally working! I wrapped it inside a function and called the function inside the ajax callback after table creation :slight_smile:

1 Like