Read HTML 'array' into JS function

Basically I have got some checkboxes on my page as such:

<input type="checkbox" name="selection[]" value="'.$index.'" id="'.$index.'"/>

Code (markup):

I had to do name="selection[]" because I need each checkbox to have an individual name for processing by the PHP script.

Anyway I have a JS function to check how many checkboxes have been ticked - if more than 3 then it will display an alert message on form submittal. This was working fine until I had to make the checkboxes into an array as above.

The JS function is as follows:

function validateForm(submit2)
{
	var submit2=document.getElementById("submit2");
	var total=0;
	
	for (counter=0; counter < submit2.selection.length; counter++)
	{
	if (submit2.selection[counter].checked)
	  {
		total=total +1;
	  }
	}
	if (total > 3)
	{
		alert("Error: You have selected more than 3 options");
		return false;
	}
}

Code (markup):

 

Hi,

as the name of input is now "selection[]", you have to use the same name to address the field in form. E.g. like submit2['selection[]'].length or submit2['selection[]'][counter].checked

 

Thanks mate, that works.

Just wondering have I written the script above in its most 'efficient' way?

It works fine but I'm always looking at ways of coding more efficiently...

 

Nice to hear.
And yes, there's possible to write it let's say shorter. First I think when you take the time and pass parameter 'submit2' as an id reference and use this function probably on form submit, you can directly call <form onsubmit="validateForm(this)">, that will save you this line - var submit2=document.getElementById("submit2"); and you can still use submit2 variable as before.
Next is - for (counter=0; counter < submit2.selection.length; counter++) - every iteration has to evaluate counter < submit2.selection.length, so it's better to assign it once and then just read :
for (var counter=0, sel_len=submit2.selection.length; counter < sel_len; counter++)
And just space saving upgrade (not sure if faster or more efficient) total++;

 

Hi lp1051,

I've got another problem with this now. I had to amend the name of the input as such:

<input type="checkbox" name="selection['.$j.']" value="'.$index.'" id="'.$index.'"/>

Code (markup):

This code is in a FOREACH loop in my PHP code, $j starts off at 0 and is incremented after each line.

How do I make this work in the JavaScript function now?

 

Anyone able to advise? Thanks.

 

Hi Omzy,

I believe it's redundant operation, you're trying to do. Let's say you have 5 checkboxes with name="selection[]". After you press submit button those fields are transformed into selection[]=1&selection[]=2&.... and in PHP you can read that as an array $selection. So you can access value of third checked checkbox - $selection[2].
In the mentioned foreach loop you can everytime echo just <input type="checkbox" name="selection[]" value="'.$index.'" id="'.$index.'"/>
And you can use the original javascript function. Does it help?

 

Hi lp1051,

Many thanks for your reply.

Basically I had to put the $j variable into the array because I implemented an error checking function which re-displays the form with the same checkbox selections if there was an error in the form submission. Long story short - I could not get it work without implementing this function, and now that bit is working fine but it has broken the JavaScript functionality...

Is there no way we can get it to work with this?

 

Hi,
if you cannot make it without the indexes, you can use something like this -
Assuming you have the checkbox names :
<input type="checkbox" name="sel[0]" />
<input type="checkbox" name="sel[1]" />
Then you rewrite JS function :
function validateForm(submit2)
{
var submit2=document.getElementById("submit2");
var total=0;
var len=submit2.length;
for (counter=0; counter < len; counter++)
{
if(submit2.type=='checkbox' && (/sel\[\d+\]/).test(submit2.name)) if(submit2.checked) total++;
if (total > 3)
{
alert("Error: You have selected more than 3 options");
return false;
}
}
It's maybe not the best way, but right now I don't know how else find checkboxes with names as "sel[some number]". So hopefully it helps or you'll find better way of your checking function.

 

Hi, I tried this but it's telling me that 'i' is undefined...
What should 'i' be declared as?

 

Hi, sorry, 'i' is actually 'counter'. I was testing the code using other variables. Also note if you have <input type="checkbox" name="selection['.$j.']" value="'.$index.'" id="'.$index.'"/> the condition need to be - if(submit2[counter].type=='checkbox' && (/selection\[\d+\]/).test(submit2[counter].name)) if(submit2[counter].checked) total++;

So now, hopefully all is right...

 

Hi guys,

I have used Omzy code but I have a problem and I'm not really a JS programmer and I can't find the solution maybe you can give me a hint.

the thing is I have only 1 line <input type="checkbox" name="selection[]" id="selection" /> to start from and add more if I need, because I have only 1 line the "submit2['selection[]'].length" alert me with "undefined" if I have 2 or more input fields the script works but don't with only 1 input, dose anybody know why ? and what's the solution for it ?

Many thanks
Claudiu