<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.

score 2 · Accepted Answer · 2014-12-11 22:01:26Z

2

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>

edited Dec 11, 2014 at 22:01

answered Nov 14, 2012 at 9:57

user447356

Sign up to request clarification or add additional context in comments.

3 Comments

Mafia Over a year ago

Thank you! That definitely worked, thank you for your time & knowledge. I will be accepting this as the correct answer in 8 minutes, I still can't at the moment. :) Thanks again

user447356 Over a year ago

Cheers, my pleasure! If we're at it, I would also advise you to do two things which are not crucial but better practice and prevent future problems. First, don't give ID as number only but rather something like id="check1", id="check2" etc. Second, don't name the submit button "submit" because it will conflict with the JavaScript submit() method if you'll try to post the form via code. Name it "btnSubmit" for example instead.

TheLibzter Over a year ago

Thank you for this answer Shadow Wizard, just what I've been looking for!

Quentin · Accepted Answer · 2012-11-14 09:58:01Z

1

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.

answered Nov 14, 2012 at 9:58

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

polin · Accepted Answer · 2012-11-14 10:12:29Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related