CODEWITHSUNDEEP
javascriptjqueryarrayscheckboxhtml-table
Jhauge
Jhauge

Reputation: 59

Only the first checkbox value is being added to my table

Regardless of how many items I check in my list of checkboxes, when I review the table I am adding a row to, only the value of the first checkbox that is checked is added to my table. I am trying to go through each and grab the value of each checkbox to insert but it does not seem to be working. any clue where i am screwing up?

In my jquery, I am running an if statement to prevent the addition of undefined to my table when a box is unchecked.

Here is a jsfiddle demonstrating whatI am doing: http://jsfiddle.net/22L9x006/

$(document).on('click', 'input:checkbox[name=certsToValid]', function() {
$newTableRow = '<tr><td><p>' + $('[name=certsToValid]:checked').val() + '</p></td><td><input type="text" placeholder="Credential #..." class="certInput" /></td><td><p>$5.00</p></td><td><div class="removeRow"></div></td></tr>';
$(this).attr('value');
if($.each($('input:checkbox[name=certsToValid]').is(':checked')) && $(this) != undefined) {
    $('.certSelections').append($newTableRow); 
}
});

Upvotes: 1

Views: 173

Answers (3)

PeterKA
PeterKA

Reputation: 24638

It's not clear what your goal is but the proper way to write your code is:

$(document).on('change', ':checkbox[name=certsToValid]', function() {
    $(this).filter(':checked').each(function() {
        $newTableRow = '<tr><td><p>' + this.value + '</p></td><td><input type="text" placeholder="Credential #..." class="certInput" /></td><td><p>$5.00</p></td><td><div class="removeRow">REMOVE</div></td></tr>';
        $('p:contains(' + this.value + ')','.certSelections tbody').length ||
            $('.certSelections tbody').append($newTableRow);
    });
});
$(document).on('click', 'div.removeRow', function() {
    $(this).closest('tr').remove();
});

DEMO

If you could clarify as to what you're trying to achieve then this answer can be improved to better guide to reach your goal.

Upvotes: 1

jyrkim
jyrkim

Reputation: 2869

Here is an extension to PeterKA's answer. The code is identical to his. I only added a kind of "filtering" to avoid duplicate rows. 

 $(document).on('change', ':checkbox[name=certsToValid]', function () {
        $(this).filter(':checked').each(function () {
            $newTableRow = '<tr><td><p>' + this.value + '</p></td><td><input type="text" placeholder="Credential #..." class="certInput" /></td><td><p>$5.00</p></td><td><div class="removeRow">REMOVE</div></td></tr>';

            var optionValue = this.value;

            var added = false;

            $('.certSelections td:first-child p').each(function (index) {

                if ($(this).text() === optionValue) {
                    added = true;
                }
            });

            //only add if it's not found in the table  
            if (!added) {

                $('.certSelections tbody').append($newTableRow);
            }
        });

    });

Fiddle

Upvotes: 0

matthias_h
matthias_h

Reputation: 11416

I've just adjusted your Fiddle so the option with the value of the clicked checkbox is added to the table. Adjustment was to change 

$newTableRow = '<tr><td><p>' + $('[name=certsToValid]:checked').val() + ...

into

$newTableRow = '<tr><td><p>' + $(this).val() + ...

This is no full solution as I guess you e.g. want to remove a row when the checkbox is unchecked, currently a new row will be added for every checkbox click, but I think you can work it out from here on.

Upvotes: 1

Related Questions