Question

I have a form that looks like this:

<form id="addClassesToDoc" action="">
    <table id="classesTable" style="border-collapse: collapse" cellpadding="3">
        <thead>
            <tr style="background-color: #a04a56; color: #ffffff;">
                <td width="50px"></td>
                <td width="75px"><b>Class<br />Number</b></td>
                <td width="500px"><b>Class Name</b></td>
            </tr>
        </thead>
        <tbody>
            <tr bgcolor="#EFE5D3">
                <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="45" /></td>
                <td>PHB7075</td>
                <td>Organizational Systems and Leadership </td>
            </tr>
            <tr bgcolor="">
                <td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="126" /></td>
                <td>TEST111</td>
                <td>Test add new class</td>
            </tr>
        </tbody>
    </table>
</form>

I am validating whether any checkboxes are checked prior to the $.ajax() call using this code:

var classesToAddToDoc = new Array();
if ($('input.chkAddClass:checked').length > 0) {
    // At least one class checked
    // Get the id(s) of the checked class(es)
    $.each($('#classesTable input[name="classesToAddToDoc[]"]:checked'), function() {
        classesToAddToDoc.push($(this).attr('value'));
    });
} else {
    // No docs checked
    //alert('Please check at least one class to add to the selected document.');
    $.each($('#classesTable input[type="checkbox"]').parent().effect('highlight',{color: '#A04A56'},1500));
    return false;
}

In the else clause, when I have the alert uncommented and the highlight line commented, the alert shows and the page stays in the same position.

But when I comment out the alert and uncomment the highlight line, the page refreshes, the checkbox cells are highlighted, and the form parameters are added to the address bar, similar to this:

[pageAddress]?docsList=46&submitAddClassesToDoc=Add+Checked+Classes+to+Selected+Document

Why would the highlight do that and how can I stop it?

Answer 1

I’m not sure exactly how to change the each part – I’m still figuring out how jQuery basics

Sure, I can at least show you how to clean that up:

var classesToAddToDoc;
if ($('input.chkAddClass:checked').length)
{
    // At least one class checked
    // Get the id(s) of the checked class(es)
    classesToAddToDoc = $('#classesTable input[name="classesToAddToDoc[]"]:checked').map(function ()
    {
        return $(this).val(); // probably want .val() over .attr('value')
    }).get();
}
else
{
    // No docs checked
    //alert('Please check at least one class to add to the selected document.');
    $('#classesTable input:checkbox').parent().effect('highlight',{color: '#A04A56'},1500));
    return false;
}

Also, the examples I see in the documentation for .each() have functions in them – how do I use that in my case?

Something like

$('some selector here').each(function (index, element)
{
    // do something for each element

    // index is the current index of iteration
    // this and element are references to the current element
});

You don’t actually need .each() at all in your particular case.