CODEWITHSUNDEEP
javascripthtmlarrayshtml-parsingjavascript-objects
Pratik Jaiswal
Pratik Jaiswal

Reputation: 299

Print values associated with checkboxes in HTML on button click event of JavaScript

Planning to get the specific ID values from the selection on the HTML page (selection here means checked boxes). Here is my code for a button click event(button will fetch the row numbers or ids):

$("a", button).click(function () {
            $('#groups').find('tr').each(function () {
                 var row = $(this);
                 if (row.find('input[type="checkbox"]').is(':checked')) {
                    console.log($(this));
            }
        });
});

This returns addtional information on rows + tr tag, however, I just want the ID part of it. Here is sample output I am getting out of above code:

[tr#row-12150.row.oddSelected, context: tr#row-12150.row.oddSelected]
[tr#row-12151.row.evenSelected, context: tr#row-12151.row.evenSelected]

This means I have selected 12150 and 12151 out of the #groups table. How do I just pull the row numbers 12150 and 12151 and not the entire detailed output and I want this to store in an array/(JS array) for multiple row numbers.

Upvotes: 0

Views: 117

Answers (2)

StackSlave
StackSlave

Reputation: 10617

Make sure your form and your button have id's first then try this instead:

$('#buttonId').click(function(){
  $('#formId input:checked').each(i, e){
    console.log($(e).attr('id'));
  }
});

Upvotes: 0

JanR
JanR

Reputation: 6130

You have the row as per the .find('tr'), your should just be able to go:

console.log($(this).attr('id')); //this should show the id in your console.

so your code becomes:

$("a", button).click(function () {
            $('#groups').find('tr').each(function () {
                 var row = $(this);
                 if (row.find('input[type="checkbox"]').is(':checked')) {
                   console.log($(this).attr('id'));
            }
        });
});

Then to just get the number you can use:

var number = $(this).attr(id).split('-')[1] //assuming it's always row-<<some number>>

putting it all together:

 $("a", button).click(function () {
                $('#groups').find('tr').each(function () {
                     var row = $(this);
                     if (row.find('input[type="checkbox"]').is(':checked')) {
                       var number = $(this).attr('id').split('-')[1] //assuming it's always row-<<some number>>;
                       console.log(number);
                }
            });
    });

To store it in an array:

$("a", button).click(function () {
                    var checkedRows = []; //define empty array.
                    var count = 0; //keep a counter to use for the array.
                    $('#groups').find('tr').each(function () {
                         var row = $(this);
                         if (row.find('input[type="checkbox"]').is(':checked')) {
                           var number = $(this).attr('id').split('-')[1];
                           checkedRows[count] = number; //add the number to our array.
                           count++; //increase the count
                    }
                });
        });

Upvotes: 1

Related Questions