<FORM> If no checkbox is selected, alert! .. ELSE .. submit. (Javascript)

Question

Language: Javascript

I really hate to ask such a seemingly simple question, but simple as it seems, I can't get this to work.

I am trying to do this entirely with pure Javascript alone (no library support) .

I have a form with checkboxes...
All checkboxes are named files[] because I use the results in an array:

<input type='checkbox' name='files[]' id='1' value='1' /> file 1<br>
<input type='checkbox' name='files[]' id='2' value='2' /> file 2<br>
<input type='checkbox' name='files[]' id='3' value='3' /> file 3<br>

What I'm trying to do is, when the user submits the form:

• IF no checkbox is checked >> return ALERT!
• ELSE submit the form

Here's my form :

<form name="deleteFiles" action="" method="post" onsubmit="return confirm_update();">

    <input type='checkbox' name='files[]' id='1' value='1' /> file 1<br>
    <input type='checkbox' name='files[]' id='2' value='2' /> file 2<br>
    <input type='checkbox' name='files[]' id='3' value='3' /> file 3<br>
    <input type="submit" value="Submit" name="submit">

</form>​

And here's my Javascript code :

function confirm_update() {
    var aCheckbox = document.deleteFiles.getElementsByTagName('input');

    if (aCheckbox.checked){
    return confirm("Are you sure you want to proceed deleting the selected files?");

    } else {
        alert("You do not have any selected files to delete.");
        return false;
    }
}​

In action: http://jsfiddle.net/DVqwB/3/

Apparently, it is not working, I know I should use getElementsById but since they each have unique IDs I can't use that. And I also know that there are lots of solutions on this site, but if you look - they actually use jQuery...

Any help & guidance would be greatly appreciated! Thank you so much.

Answer 1

Correct way to iterate the collection will be: (full example)

 function confirm_update() { var arrCheckboxes = document.deleteFiles.elements["files[]"]; var checkCount = 0; for (var i = 0; i < arrCheckboxes.length; i++) { checkCount += (arrCheckboxes[i].checked) ? 1 : 0; } if (checkCount > 0){ return confirm("Are you sure you want to proceed deleting the selected files?"); } else { alert("You do not have any selected files to delete."); return false; } } 

 body { margin: 30px; } 

 <form name="deleteFiles" action="" method="post" onsubmit="return confirm_update();"> <input type='checkbox' name='files[]' id='1' value='1' /> file 1<br /> <input type='checkbox' name='files[]' id='2' value='2' /> file 2<br /> <input type='checkbox' name='files[]' id='3' value='3' /> file 3<br /> <input type="submit" value="Submit" name="submit" /> </form> 

Answer 2

getElementsByTagName returns a NodeList (which is like an array), not a single element.

You have to loop over it and test each element in turn, and only handle the "else" scenario if you get to the end of the loop without finding a match for the condition.

Answer 3

you can use this script.just chang your filename in action of form

    <form id="deleteFiles" name="deleteFiles" action="yourFileName.html" method="post" onsubmit="return confirm_update();">

    <input type='checkbox' name='files[]' id='1' value='1' /> file 1<br>
    <input type='checkbox' name='files[]' id='2' value='2' /> file 2<br>
    <input type='checkbox' name='files[]' id='3' value='3' /> file 3<br>
    <input type="submit" value="Submit" name="submit">

</form>
    <script type="text/javascript">
    function confirm_update() {
        check=false;
        var aCheckbox = document.getElementById('deleteFiles').elements;
        for(i=0;i<aCheckbox.length;++i)
        {
            if(aCheckbox[i].type=='checkbox' && aCheckbox[i].checked)
           {
               check=true;
           }
         }
         if(check==true)
         {
             return confirm("Do u really want to delete?");
        }
        else
            {alert("you haven't selected any of the checkboxex");
            return false;
            }

    }
    </script>