CODEWITHSUNDEEP
javascript
MukulAgr
MukulAgr

Reputation: 291

my javascript has some mistake in checkbox checking

I have a problem in my javascript. All I want to do is if my user doesnt select any checkbox out given 10 checkboxes then I want to give him an alert else submit the form. I have written a js code but thats not working even if checkbox is checked. Please point me out my mistake. Heres my code.

window.onload = function() {

    document.getElementById('submitbtn').onclick = function() {
                    var count = 0;
                    if(document.getElementById("pid1").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid2").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid3").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid4").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid5").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid6").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid7").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid8").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid9").checked == "checked")
                    {
                        count++;
                    }
                    if(document.getElementById("pid10").checked == "checked")
                    {
                        count++;
                    }
                    alert(count);
                    if(count == 0){
                    alert("Please select atleast 1 product");
                    return false;}
                    else{
                        document.getElementById("formreturn").submit();
                        return false;}
                };
    };

Upvotes: 1

Views: 95

Answers (4)

Abhitalks
Abhitalks

Reputation: 28437

You should check the checked property for truthy/falsy, because the checked property is a boolean. Like this:

if (document.getElementById("pid8").checked) { ..

Even in HTML you don't need to assign the string "checked" to the "checked" attribute. Only the presence of this attribute is enough.

You can re-write this:

<input type="checkbox" checked="checked" />

as this:

<input type="checkbox" checked />

In fact you can assign anything to it and it will be ignored and treated as presence.

This will also work:

<input type="checkbox" checked="DoNotCheck" />

I see that you are trying to count the number of checked checkboxes. You could do that easily by using a querySelectorAll.

See this Snippet:

document.getElementById('btn').onclick = function() {
    var l = document.querySelectorAll("input[type=checkbox]:checked").length;
    document.getElementById('result').innerText = l;
}
<input type="checkbox" /><input type="checkbox" /><input type="checkbox" />
<input type="checkbox" /><input type="checkbox" /><input type="checkbox" />
<hr />
<input id="btn" type="button" value="Go" />
<p id="result" ></p>

Upvotes: 4

Smile0ff
Smile0ff

Reputation: 798

<form action="some.php" id="myForm" method="POST">
    <input type="checkbox" name="some1" value="" id="some1">
    <label for="some1">title of checkbox 1</label>
    <input type="checkbox" name="some2" value="" id="some2">
    <label for="some2">title of checkbox 2</label>
    <input type="checkbox" name="some3" value="" id="some3">
    <label for="some3">title of checkbox 3</label>
</form>


$(function(){

    var form = $("#myForm");

    form.submit(function(e){

       if(form.find("input[type=checkbox]:checked").length > 0){

       } else{

       }

    });

});

Upvotes: 2

AKX
AKX

Reputation: 169338

Assuming pidX are inputs of type checkbox, you don't need to compare .checked to "checked".

Also, use a loop...

window.onload = function() {
    document.getElementById('submitbtn').onclick = function() {
        var count = 0;
        for(var i = 1; i <= 10; i++) {
            if (document.getElementById("pid" + i).checked) {
                count++;
            }
        }
        alert(count);
        if (count == 0) {
            alert("Please select at least 1 product");
            return false;
        }
        document.getElementById("formreturn").submit();
        return false;
    };
};

Upvotes: 1

Beri
Beri

Reputation: 11620

Your answer: use checked attribute, it is a boolean, so you don't need to compare it to 'checked'.

Secondly: rewrite it, so there is less code :)

        var count = 0;
        for (var index = 1; index<= 10; index++){
           if(document.getElementById("pid" + index).checked){
                    count++;
           }
        }

Upvotes: 2

Related Questions