CODEWITHSUNDEEP
javascriptjqueryhtmlforms
lukey
lukey

Reputation: 29

how do i put the following in a for loop

I would like to put the following in a for loop but i am having difficulties. Any help would be appreciated 

 $("input:submit").click(function(){  
         if (!$("input[name=attendance1]").is(":checked")) {
            alert('Please select preference');
            return false;
            }
       else if (!$("input[name=attendance2]").is(":checked")) {
            alert('Please select preference');
            return false;
                }
        else if (!$("input[name=attendance3]").is(":checked")) {
            alert('Please select preference');
            return false;
        }

        });


});

I have tried:

for($i=1; $i<=3; $i++)
                 {
$("input:submit").click(function(){  
             if (!$("#food" + $i).is(":checked")) {
                alert('Please select preference');
                return false;
                }

            });         

    });

Upvotes: 0

Views: 95

Answers (4)

Joseph
Joseph

Reputation: 119847

Here's my take on it. it has the advantage of you listing down in an array what names you want checked, regardless what names they are

//jQuery '.on()' for versions 1.7+
$("input:submit").on('click', function() {

    //assume valid unless found otherwise
    var valid = true;

    //add the input names you want to verify
    var nameList = [
        'attendance1',
        'attendance2',
        'attendance3'
    ];

    //loop through names
    for (var i = 0; i < nameList.length; i++) {
        var checked = $('input[name="'+nameList[i]+'"]').is(':checked');
        if (!checked) {
            alert('Please select a preference');

            //mark false when something wrong found
            valid = false;
        }
    }

    //check if validity persisted
    if(valid){
        //do something
    }

    //prevent default actions
    return false;
});​

Upvotes: 0

Joe
Joe

Reputation: 82614

First fix: 

alert('Please select preference);

with

alert('Please select preference');

Then if you want to loop:

for (var i = 0; i < 3; i++) {
    if (!$("input[name=attendance" + i + "]").is(":checked")) {
            alert('Please select preference');
            return false;
    }
}

Or better yet use jQuery's startsWith selector:

if (!$('input[name^="attendance"]').is(":checked")) {
            alert('Please select preference');
            return false;
}

Example

Upvotes: 2

augustknight
augustknight

Reputation: 448

I generally use a class name on my DOM elements when I want to do something like this. That makes it easier to iterate through the elements using .each(). I was not aware of the startsWith selector mentioned above, but it does look a bit cleaner than my method.

<!-- DO STUFF -->

    <input name="attendance1" class="my-unique-class-name" />
    <input name="attendance2" class="my-unique-class-name" />
    <input name="attendance3" class="my-unique-class-name" />

<!-- DO STUFF -->

<script type="text/javascript">
    $("input:submit").click(function(){
        var valid = true;
        $("input.my-unique-class-name").each(function (el) {
            if ( ! $(el).is(":checked") ) {
                valid = false;
            }
        });
        if ( ! valid ) {
            alert('Please select preference');
            return false;
        }
    });
</script>

Upvotes: 0

Marc
Marc

Reputation: 11613

You're missing a closing single quotation mark on all 3 alert statements.

Upvotes: 0

Related Questions