Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

checkbox array -> function? 1

Status
Not open for further replies.

dan2001

Programmer
May 22, 2001
3
0
0
GB
Hi,

I have a form which contains within it a group of checkboxes, which for other purposes, the values form part of an array. The function for which this was originally intended works fine but unfortunately I have a preview function which pops up a window with all the information entered into the form. Because of this I have to take the values from the form to a Javascript function. For the other form elements that aren't in arrays I have managed this already but I am stuck at the array... These are snippets of the code I am using:



Bracelets:
Silver:<input type=&quot;checkbox&quot; name=&quot;brace[]&quot; id=&quot;brace[]&quot; value=&quot;1&quot;>
Gold:<input type=&quot;checkbox&quot; name=&quot;brace[]&quot; id=&quot;brace[]&quot; value=&quot;10&quot;>

<button id=&quot;preview_but&quot; onClick=&quot;preview(uploadfile1.value,uploadfile2.value,what.value,description.value,brace.value)&quot;>Preview</button>
<!-- brace is the array -->

Any ideas on how to get the checkboxes to be passed to the preview function as an array and then extracted within the function?

Any help is most gratefully recieved as I am only really starting out in Javascript...

Dan :)

 
I've never seen checkboxes used with an array-type reference in the name. Does that even work?
Tracy Dryden
tracy@bydisn.com

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard.
 
tsdragon,

I have been looking into this problem a lot and I have come to the conclusion that although my PHP script can use checkboxes in an array, sadly Javascript cannot, at least to the level of my understanding of Javascript anyway.

I'm thinking up an alternative solution which a lot more code but should work in the end, but thanks for responding.

Dan.
 
The problem you're going to run into using this method, is that the array you are trying to use (brace) is the array of the checkboxes themselves, it's not an array of which checkboxes were checked. You'll have to create a 2nd function that will do that for you, by looping through the first array, like so:

Silver:<input type=&quot;checkbox&quot; name=&quot;brace&quot; value=&quot;1&quot;>
Gold:<input type=&quot;checkbox&quot; name=&quot;brace&quot; value=&quot;10&quot;>

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
// This function will take a checkbox and return all checked values into an array

function checkBox2Array(vCheck){
// Initialize Array
var aCheckBoxes = new Array();

// Loop through the checkboxes
for(i=0;i<vCheck.length;i++){
// If the checkbox is checked, add it to the array
if(vCheck
Code:
[i]
.checked){
aCheckBoxes
Code:
[aCheckBoxes.length]
= vCheck
Code:
[i]
.value;
}
}

// Return Array
return aCheckBoxes;
}
//-->
</SCRIPT>

<button id=&quot;preview_but&quot; onClick=&quot;preview(checkBox2Array(this.form.brace))&quot;>Preview</button>
- tleish
 
Thank-you very nuch for your reply tleish, as far as I understand it I think it will work, even when I have multiple arrays.

One question though, the
Code:
vCheck[i].value
, will this return the value that I gave the checkbox or will it just tell me whether it was checked or not? Also I noticed that you didn't include the [] in the name / id of the checkbox, was this because of what tsdragon said earlier in the thread about not being able to use the [] as part of a name / id where Javascript. The reason I ask is because if I want to go down this road I have to have the [] there so that the php script I am using will recognise it as an array.

An alternative solution that I have in mind is where they are all named with individual names, with no array infered and use php to create an array after the form has been submitted, which then means that I won't have to try and pull out an array from the form with the Javascript. This will mean that I will have to check for each value individually, but at least I will understand that process more fully.

Thank-you for you help.

Dan.
 
In the checkBox2Array() function the statement:

if(vCheck
Code:
[i]
.checked)
{
aCheckBoxes
Code:
[aCheckBoxes.length]
= vCheck
Code:
[i]
.value
;
}

if(vCheck
Code:
[i]
.checked)
checks to see if it's checked. If it is checked, it adds the value of the array to the array aCheckBoxes
Code:
[]
.

I don't think you can have form objects with the characters &quot;
Code:
[]
&quot; (ex &quot;brac
Code:
e[]
&quot;) in them, javascript tries to interperet this as a direct array element and will throw errors.

To putting this in a blank html page with the mock-up preview function I created. This will show you what's being passed back from the checkBox2Array() function:
==========================
Code:
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
	function preview(v){
		vAlertString = &quot;the length of the v array is = &quot; + v.length + &quot;\n&quot;;
		
		if(v.length)
			vAlertString += &quot;v = &quot; + v + &quot;\n&quot;;
			
		for(i=0;i<v.length;i++){
			vAlertString += &quot;v[&quot; + i + &quot;] = &quot; + v[i] + &quot;\n&quot;;
		}
		
		alert(vAlertString);
	}
//-->
</SCRIPT>
</HEAD>

<BODY BGCOLOR=&quot;#FFFFFF&quot;>
<FORM NAME=&quot;form1&quot; >
Silver:<input type=&quot;checkbox&quot; name=&quot;brace&quot; value=&quot;1&quot;>
Gold:<input type=&quot;checkbox&quot; name=&quot;brace&quot; value=&quot;10&quot;>

<SCRIPT LANGUAGE=&quot;JavaScript&quot;>
<!--
    // This function will take a checkbox and return all checked values into an array
    function checkBox2Array(vCheck){
        // Initialize Array
        var aCheckBoxes = new Array();

        // Loop through the checkboxes
        for(i=0;i<vCheck.length;i++){
            // If the checkbox is checked, add it to the array
            if(vCheck[i].checked){
                aCheckBoxes[aCheckBoxes.length] = vCheck[i].value;
            }
        }
        
        // Return Array
        return aCheckBoxes;
    }
//-->
</SCRIPT>

<button id=&quot;preview_but&quot; onClick=&quot;preview(checkBox2Array(this.form.brace))&quot;>Preview</button> 
</FORM>

</BODY>
</HTML>
========================
- tleish
 
Many thanks for the help, I am going to see if I can work around the '[]'... Your script looks like it will help me through my problem, Thank-you :)

Dan.
 
I am trying to figure out exactly the same problem, so I'm curious, Dan, if you ever got this to work. If so, could you post how you did it?
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top