Form Elements to Array to String Problem...

[JSDNUK]

Hi Everyone,

Just having a few problems getting a script to work.

What I need to do is take the values from a series of checked checkboxes and write them to an array.

Once this is done I need to convert the array to a CSV string (using array.join) and use this string to populate a hidden field.

The problem i'm having is when I try to take the value assigned to " i " and use it in the if statement below. Does anyone know a work around for this?

NB. Checkbox names are sequential. Script is called onClick of submit button

<script language="javascript" type="text/javascript">

var recipient = new Array()

function AddRecipients() {

alert("Function has been called");

for (var i = 0; i==recipient.length; i++) {
	alert("For statement has worked");
	alert(i);
	if (document.consultationsForm.recipientdetails_[i].checked == true) {
		alert("If statement has worked");
recipient.push(document.consultationsForm.recipientdetails_[i].value);
		alert(recipient);				
	}
}
}
</script>

<form method="post" name="consultationsForm" action="">
<input type="checkbox" name="recipientdetails_0" value="emailaddress_a@mydomain.com">
<input type="checkbox" name="recipientdetails_1" value="postaddress_@mydomain.com">

Many thanks!!!

 

[trollacious]

You could do all this with the server-side scripting that processes the form when submitted, too.

Client side or server side, though, if you have a hidden element with the maximum number of checkboxes, then you can use that value as a loop terminator to concatenate the values. You wouldn't need to put them in an array for this, just build the string and write the value into your hidden element.

Lee

 

[theniteowl]

There are a number of issues with your code.
The first is that you are trying to use the length of the recipient array as the basis for your loop (as trollactious mentioned) which will not work because when the function starts the array has 0 length. The function will run 0 to 0, meaning it will only test the first checkbox. If the checkbox is checked it will insert the value into the array but it will not test any other values.

So you need to know how many checkboxes to test up front.

Also, this:
document.consultationsForm.recipientdetails_.checked
Should change to this:
document.consultationsForm('recipientdetails_' + i).checked

And this:
document.consultationsForm.recipientdetails_.value
to this:
document.consultationsForm('recipientdetails_' + i).value

You need to build up the name you want to reference. If you use recipientdetails_ without quotes it looks like an undeclared variable which will not have a value.

As trollacious said, if you use server-side code to process the form then you could just pull all the values from the form post and put it together there.
If you must do it in Javascript for some reason then you either need to hardcode the number of checkboxes you want to loop through, use DOM methods for reading the values of all checkboxes on the page or set all of your checkbox fields to have the same name.

If you set all checkbox fields to the same name then in your javascript function you already have an array of the checkboxes you can loop through to test the checked property and pull the value to output in your string.






Stamp out, eliminate and abolish redundancy!

 

[tsuji]

Whatever the rest, this is nonsense.
>[tt]for (var i = 0; i==recipient.length; i++) {[/tt]
[tt]for (var i = 0; i[red]<[/red]recipient.length; i++) {[/tt]

 

[Guest_imported]

tsuji,

Given that the length check is against the length of the recipient array, which will be 0... So the loop will never execute at all with that change.

The loop needs to be against all relevenat checkboxes - which at the moment, due to due namimg scheme, would have to be done via a getElementsByTagName, and then a partial check on the start of the name.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[JSDNUK]

Hey Guys,

Thanks for your help. I've done my best to take in all your advice, but am still not having any luck.

I've set an upper limit for i (being equal to the total number of listings) and modified the syntax of document.consultationsForm('recipientdetails_' + i) but still without success.

If I do an alert('recipientdetails_' + i) I get a message stating recipientdetails_0, etc, but when it comes to using this within document.consultationsForm('recipientdetails_' + i).checked, nothing happens. I have also tried adding a . between consultationsForm and ('recipientdetails_' + i).

Currently the only way I can get this script to run correctly is to change the code to look like this...

document.consultationsForm.recipientdetails_0.checked

This, however, requires a manual update every time the list is updated.

Does anybody know why this is happening?

Again, many thanks to everyone who's replied. I hope to hear from you all again soon!

(script update below)

<script language="javascript" type="text/javascript">

var recipient = new Array()

function AddRecipients() {

alert("Function has been called");

for (var i = 0; i < 2; i++) { // i < Total Number of  listings
	alert("For statement has worked");
	alert(i);
	if (document.consultationsForm('recipientdetails_' + i).checked == true) {
		alert("If statement true");
		recipient.push(document.consultationsForm('recipientdetails_' + i).value);
		alert(recipient);				
	}
	else {
		alert("If statement false");
	}
}
}

</script>

 

[BillyRayPreachersSon]

I've not tested this, but I suspect it should be fine:

function AddRecipients() {
	var frm = document.forms['consultationsForm'].elements;
	var cbNum = 0;
	while (cb = frm['recipientdetails_' + cbNum]) {
		if (cb.checked) recipient[recipient.length] = cb.value;
		cbNum++;
	}
	alert(recipient);
}

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[JSDNUK]

Thanks Dan, you're a star!! Works perfectly!

Now that the pressure's off, I'd still like to know why my script wasn't working. Can anyone help me out here???

Thanks!!

dAve

 

[BillyRayPreachersSon]

Now that the pressure's off, I'd still like to know why my script wasn't working. Can anyone help me out here???

Did you not read the previous posts by myself, tsuji, and theniteowl?

There are at least 2 direct statements giving the same reason why your code was failing initially.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[JSDNUK]

Sorry for the confusion Dan, but my comment was in regard to my most recent post which (to the best of my knowledge) had applied the comments of yourself, Tsuji, and Theniteowl.

Have I missed something?

dave

 

[theniteowl]

All the answers are above.
1. You were using your array as the basis to search the checked boxes. The array of course starts at zero so when it runs the array only tests recipientdetails_0.

2. the for loop:for (var i = 0; i==recipient.length; i++)
will never evaluate correctly. It says essentially loop from 0 while i is the same as the length of the array.
You cannot really use the array as the basis for testing the checkboxes because the array does not know how many checkboxes there are but the correct format would be:
for (var i = 0; i<recipient.length; i++)
The array starts at zero but the length is the number of items in the array. So if you had an array with 5 elements you would be loop 0-4 (not 0-5 as that would be 6 elements) so you set the loop starting at 0 and looping while i is less than recipient.length.


3. This line:
if (document.consultationsForm.recipientdetails_.checked == true)
is looking for a field named named recipientdetails_ which does not exist. You need to build the name that is getting used in the statement so you use parenthesis, put quotes are the text portion so it will not be interpreted as a variable then tack on the value at the end:
document.consultationsForm('recipientdetails_' + i).checked

Now, usng the == true works but it is redundant.
The if statement is evaluating the statement inside the parens as true or false so saying:
if (document.consultationsForm('recipientdetails_' + i).checked)
will return true if the box is checked and adding on the == true is redundant. It does not hurt your code to have it in there, it is just not needed.

Dan's approach above does not use your array as the basis of the loop. It grabs all the elements on the form then tests them incrementally to see if they have the correctly incremented name and the checked property.
I wrote a sample that worked in a different but similar fashion but Dan posted first and his code as a bit more elegant than mine so I did not post it.



Stamp out, eliminate and abolish redundancy!

 

[JSDNUK]

Thanks so much for taking the time to explain where I went wrong, but i still don't quite understand how the (updated) code below doesn't work. Apologies in advance for being a dumbass if I've missed something...

<script language="javascript" type="text/javascript">

var recipient = new Array()

function AddRecipients() {

alert("Function has been called");

for (var i = 0; i < 2; i++) { // i < Total Number of  listings
    alert("For statement has worked");
    alert(i);
    if (document.consultationsForm('recipientdetails_' + i).checked == true) {
        alert("If statement true");
        recipient.push(document.consultationsForm('recipientdetails_' + i).value);
        alert(recipient);                
    }
    else {
        alert("If statement false");
    }
}
}

</script>

 

[BillyRayPreachersSon]

Why not find out yourself? There are only 2 real differences between your code and mine, so make the changes and see which fixes it. First, change this:

('recipientdetails_' + i).

to this:

[!][[/!]'recipientdetails_' + i[!]][/!].

If the code still fails, then additionally, change this:

document.consultationsForm.

to this:

document.[!]forms['[/!]consultationsForm[!]'][/!].

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[JSDNUK]

Fair point. To be honest I completely missed both of those. Will see what these changes do.

Thanks Dan...