Checking to see if atleast one item has been selected in a checkbox list using javascript

Question

I would like to have my code check if one or more check boxes have been selected in a list of check boxes. If no check boxes have been selected then I would like a window.alert to pop up saying "please select at least one interest". Currently all it does is alert that nothing has been checked even if you check a box.

My code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<title>Web Site Registration Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function confirmSubmit(){
    if(document.forms[0].interests.checked) {
         {window.alert("Thank you");}
    } else {
    {window.alert("Select at least one preference");
}
    return false;}
return true;
}

</script>
</head>
<body>
<h1>Web Site Registration Form</h1>
<h2>Personal Information</h2>
<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit()">

   <p>Select areas of interest (select at least one)</p>
    <p><input type="checkbox" name="interests"
         value="entertainment">Entertainment<br />
    <input type="checkbox" name="interests"
         value="business">Business<br />
    <input type="checkbox" name="interests"
         value="music">Music<br />
    <input type="checkbox" name="interests"
         value="shopping">Shopping<br />
    <input type="checkbox" name="interests"
         value="travel">Travel</p>
    <p><input type="submit"></p>
    </form>
</body>
</html>

Note: The extra code in the header is there to submit all data entered to a page which shows what has been submitted. This is my first post so feel free to let me know what other information may help. Thanks!

score 1 · Accepted Answer · answered Apr 17 '15 at 00:02

1

Add your script tag below the form, you can use this to pass the form to your call back. Use querySelector for :checked to search inside the form for a checked input.

<script type="text/javascript">
function confirmSubmit(form){
    if(form.querySelector(":checked")) {
        window.alert("Thank you");
        return true;
    } else {
        window.alert("Select at least one preference");
        return false;
    }
}

</script>

You can pass the form to your call back by updating your onclick listener;

<form action="FormProcessor.html" method="get"
enctype="application/x-www-form-urlencoded" 
onsubmit="return confirmSubmit(this)">

Here is the fiddle.

answered Apr 17 '15 at 00:02

Victory

5,811
2
26
45

Thank you that solves my problem with that code, however this brings up a larger issue. I have other functions that check if fields such as email and name are filled in. Adding the [confirmSubmit(this)] causes the other functions to not check other fields on the page. Do you have any suggestions on how to work around this? – southerncoop7 Apr 17 '15 at 18:31
Are you looking over the whole DOM for those other fields or just the form? If its just the form, then you should pass along the form to the function. Otherwise you can always select for the form inside the function. Maybe start another question? – Victory Apr 17 '15 at 21:33
I have posted a new question titled "Checking that each field in a form has been properly filled out" linked: http://stackoverflow.com/questions/29710319/checking-that-each-field-in-a-form-has-been-properly-filled-out – southerncoop7 Apr 17 '15 at 22:16

score 0 · Answer 2 · answered Apr 17 '15 at 00:23

0

With jQuery you can do this:

function confirmSubmit(){
$('input').each(function(index, item) {
   if(item.checked){
     return true;
   }
});
}

answered Apr 17 '15 at 00:23

Pedro Lobito

94,083
31
258
268

Checking to see if atleast one item has been selected in a checkbox list using javascript

2 Answers2