Question

I am probably going about this all wrong, but here’s what I’m trying to do:

I have a form that has approximately 50 select boxes that are generated dynamically based on some database info. I do not have control over the IDs of the text boxes, but I can add a class to each of them. Before the form is submitted, the user needs to select at least one item from the select box, but no more than four.

I’m a little bit sleepy, and I’m unfamiliar with jQuery overall, but I’m trying to override $(“form”).submit, and here’s what I’m doing. Any advice or suggestions are greatly appreciated.

$("form").submit(function() {

    $('.sportsCoachedValidation').each(function() {
        if ($('.sportsCoachedValidation :selected').text() != 'N/A') {
            sportsSelected++
        }                    
    });

    if (sportsSelected >= 1 && sportsSelected <= 4) {
        return true;
    }
    else if (sportsSelected > 4) {
        alert('You can only coach up to four sports.');
        sportsSelected = 0;
        return false;
    }
    else {
        alert('Please select at least one coached sport.');
        sportsSelected = 0;
        return false;
    }
});

Answer 1

OK, here is one other way of perhaps simplifying this further?

$("form").submit(function() {

    // How about avoiding the "each" loop, and just let jQuery count 'em up? (Not actually tested!)
    var sportsSelected = $('.sportsCoachedValidation :selected[value!="N/A"]').length;

    if (sportsSelected >= 1 && sportsSelected <= 4) {
        return true;
    }
    else if (sportsSelected > 4) {
        alert('You can only coach up to four sports.');
        return false;
    }
    else {
        alert('Please select at least one coached sport.');
        return false;
    }
});

Just a thought I had after my last post. It may need some refinement. Hopefully it isn’t a complete failure and is possible for what you’re trying to do. Good luck!