Javascript Check if Array is Set

Question

I have a form validator script that is meant to verify that at least 1 checkbox is checked.

<form name="samples" onsubmit="return validateForm();" action="process.php" method="post">
    <input type="checkbox" name="products[]" value="product-a">
    <input type="checkbox" name="products[]" value="product-b">
    <input type="checkbox" name="products[]" value="product-c">
</form>

<script>
function validateForm() {
    var counter = document.forms["samples"]["products"].value;
    if (x == null || x == "") {
        alert("Please select at least one product");
        return false;
    }
}
</script>

The code above does not seem to work.

What am I doing wrong?

Can you not just check if the value of `products[]` is null? — James Coyle, Aug 22 '13 at 19:12
possible duplicate of [Best way to find an item in a JavaScript array?](http://stackoverflow.com/questions/143847/best-way-to-find-an-item-in-a-javascript-array) — Shalom Craimer, Mar 13 '14 at 09:27

score 1 · Answer 1 · answered Aug 22 '13 at 19:12

1

You have no input element with name products, you do have elements with name products[]

arrayOfProductInputs = document.forms["samples"]["products[]"];
// ^^^ loop through those

In total:

function validateCheckboxes()  {
    var arrayOfProductInputs = document.forms["samples"]["products[]"];
    var productsChecked = 0;
    arrayOfProductInputs.forEach(function(itm){
        if(itm.checked) productsChecked++;
    });

    if(productsChecked <= 0)  {
        alert("Please select at least one product");
        return false;
    }
    return true;
}

answered Aug 22 '13 at 19:12

Naftali

144,921
39
244
303

Dangit. It looks like this should work but its not working... It's just sending the form through when nothings checked. – Brian Barrus Aug 22 '13 at 20:42
@BrianBarrus You can try to add a check if `arrayOfProductInputs` is undefined. – Naftali Aug 22 '13 at 20:53
It seems like the array products[] – Brian Barrus Aug 23 '13 at 16:24

Ahsan Shah · Accepted Answer · 2013-08-22T19:21:58.683

0

<script type = "text/javascript">
function validateForm() {
var flag = false;
var products = document.samples["products[]"];
for (var i = 0; i<products.length; i++) {
    if(products[i].checked){
        flag = true;
    }
}
if (flag != true) {
    alert("Please select at least one product");
    return false;
}
return true;
}
</script>

edited Aug 22 '13 at 19:21

answered Aug 22 '13 at 19:15

Ahsan Shah

3,931
1
34
48

This is assuming that there are only 3 products.... And you are reselecting the form elements on each iteration of the loop... which is bad... – Naftali Aug 22 '13 at 19:16
modified as per your suggestions Neal. – Ahsan Shah Aug 22 '13 at 19:22

Javascript Check if Array is Set

2 Answers2