Catching an array with javascript and working with the values of the array

Question

I have the following form:

echo '<form method="post" id="myForm" onsubmit="return formComp()">';
foreach($array as $value){
   echo '<input type="checkbox" name="check[]" value="$value">';
}
echo '<input type="submit" name="ok" value="OK">';
echo '</form>';

and the javascript:

function formComp(){
    var theForm=document.getElementById("myForm");
    var a = theForm.elements['check[]'];
    for( var i=1; i<a.length; i++){
        if(!a[i].checked){
            alert('Select an option');
            return false;
        }
        else{
            return true;
            break;
        }
    }
}

I'm catching a php array,and use it in a loop so i can check each option if it meets the requirements(if it's checked).The problem is that it doesn't stop even if i check an option.When, atleast one option is checked,i need the loop to stop and return true,so it can be submited.

EDIT: By the way,the function returns true when i check every option.But i can't make it return true when atleast one is checked.

You need to check all options or what? PS. This is not PHP array. — Flash Thunder
– Flash Thunder, Commented Jan 28, 2015 at 8:00
@FlashThunder , the problem is that i dont want to check all options to let me submit,if just one it's submited then it's enough.But the function won't let me if all options are not checked.And i'm pretty sure it is a php array,check the check[] from the form above — Petru Lebada
– Petru Lebada, Commented Jan 28, 2015 at 8:02
check[] is only a name of HTML element. It is array, because it has [], as it is defined in HTML specification ツツツ But, anyway, check my answer, it should fit your needs. — Flash Thunder
– Flash Thunder, Commented Jan 28, 2015 at 8:10

T.J. Crowder · Accepted Answer · 2015-01-28 08:20:10Z

2

Your code mostly does that, but it skips the first input, and it returns false if it finds something unchecked; instead, it should continue checking:

function formComp(){
    var theForm=document.getElementById("myForm");
    var a = theForm.elements['check[]'];
    for( var i=0; i<a.length; i++){      // Start at 0, not 1
                                         // Don't do anything here if unchecked
        if(a[i].checked){                // We found a checked one, so
            return true;                 // we can return true now
                                         // No `break` here
        }
    }
    alert('Select an option');           // NOW tell them to choose something...
    return false;                        // ...and return false, since none are checked
}

Example:

function formComp(){
  var theForm=document.getElementById("myForm");
  var a = theForm.elements['check[]'];
  for( var i=0; i<a.length; i++){
    if(a[i].checked){
      return true;
    }
  }
  alert('Select an option');
  return false;
}
function test() {
  var rv = formComp();
  alert("formComp result: " + rv);
}

<form id="myForm">
<input type="checkbox" name="check[]" value="1">
<input type="checkbox" name="check[]" value="2">
<input type="checkbox" name="check[]" value="3">
<input type="checkbox" name="check[]" value="4">
<input type="button" value="Test" onclick="test()">
</form>

edited Jan 28, 2015 at 8:20

answered Jan 28, 2015 at 8:00

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

3 Comments

Petru Lebada Over a year ago

it works,but only if the first option is checked.If i try to check only the second or the third option,it returns false.

T.J. Crowder Over a year ago

@PetruLebada: The above works regardless of which option is checked, I've added a live example.

T.J. Crowder Over a year ago

@PetruLebada: The modified code in the question is not what I gave you above, which is why it doesn't work. But again, as I said in a comment on the question, you shouldn't modify the code in the question in response to answers.

Flash Thunder · Accepted Answer · 2015-01-28 08:11:42Z

0

The problem is that you are breaking the loop only when all elements are checked. This would lead to alert() spam.

function formComp(){
    var theForm=document.getElementById("myForm");
    var a = theForm.elements['check[]'];
    var isnotchecked = 0;
    for( var i=0; i<a.length; i++){
        if(!a[i].checked){
           isnotchecked = 1;
           break;
        }
    }
    if(isnotchecked){
        alert('at least one of em is not checked!');
        return false;
    }else{
        return true;
    }
}

Or, if one has to be checked to submit:

function formComp(){
    var theForm=document.getElementById("myForm");
    var a = theForm.elements['check[]'];
    var ischecked = 0;
    for( var i=0; i<a.length; i++){
        if(a[i].checked){
           ischecked = 1;
           break;
        }
    }
    if(ischecked){
        return true;
    }else{
        alert('select at least one option!');
        return false;
    }
}

edited Jan 28, 2015 at 8:11

answered Jan 28, 2015 at 8:03

Flash Thunder

12.1k10 gold badges55 silver badges103 bronze badges

3 Comments

Petru Lebada Over a year ago

is not working and as Crowder says, it's too complicated for something like this...

Flash Thunder Over a year ago

Yes, it is more complicated for OP to understand how it should work. It is true about first element, corrected, thank you.

Flash Thunder Over a year ago

About your edit - this is because return statement ends up the function. Always. No matter where you place it or what value you return. That is why I used break not return - this breaks the loop, and continues with the rest.

Collectives™ on Stack Overflow

Catching an array with javascript and working with the values of the array

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related