Check all boxes not working with PHP naming conventions.

Forum Moderators: open

Message Too Old, No Replies

Check all boxes not working with PHP naming conventions.

Slartibartfast

7:11 pm on Aug 2, 2004 (gmt 0)

I have an email list manager that pulls up the accounts from a MySQL database using PHP. It pulls them all into a form where the addresses are in fields with checkboxes. I want to keep the PHP script handling the form processing, but I want to add a check all button for ease of management.

Problem is that I have to have the checkbox list named like:
"options[]" for PHP to recognize the array. Javascript won't allow the brackets.

I'm a JS beginner so I was wondering if anyone knows a way to keep the brackets that'd be great.

Thanks

Bernard Marx

8:18 pm on Aug 2, 2004 (gmt 0)

Javascript will allow the brackets, you jut need to reference the element using bracket notation:

formRef.elements['options[]'].value

Thre may still be a problem if you are worried about validation, as [] are not considered valid characters for name or id attributes...but your script will still work.

Slartibartfast

9:01 pm on Aug 2, 2004 (gmt 0)

So if I'm using this(from w3schools DHTML):
<code>
<script type="text/javascript">
function makeCheck(thisForm)
{
for (i = 0; i < thisForm.option.length; i++)
{
thisForm.option[i].checked=true
}
}

function makeUncheck(thisForm)
{
for (i = 0; i < thisForm.option.length; i++)
{
thisForm.option[i].checked=false
}
}
</script>

</head>
<body>
<div style="position: absolute; top: 120px; left: 40px;">

<form name="myForm">
<input type="button" value="Check" onclick="makeCheck(this.form)">
<input type="button" value="Uncheck" onclick="makeUncheck(this.form)">
<br />
<input type="checkbox" name="option[]">Apples<br />
<input type="checkbox" name="option[]">Oranges<br />
<input type="checkbox" name="option[]">Bananas<br />
<input type="checkbox" name="option[]">Melons
</form>
</code>

Where should I put the formRef.elements['options[]'].value?
Also is formRef native to JS or is it just a variable that you're using for my form name?

I've tried onclick= "makeUncheck(this.Ref.elements['options[]'].value)"

Don't know if that was what you meant. Thanks for the help.

Bernard Marx

11:12 pm on Aug 2, 2004 (gmt 0)

You can (+should) access the form's elements via it's 'elements' collection. If a number of elements share the same name, then an array will be returned (assigned to options var here).

Might as well just use one function here, instead of two very similar ones. The function checks and unchecks depending on whether the 2nd arg is true or false.


function makeCheck(form,check)  
{ 
  var options = form.elements['option[]'] 
  for (var i=0;i<options.length;i++)  
    options[i].checked = check 
}

....
// example calls
onclick="makeCheck(this.form,true)
onclick="makeCheck(this.form,false)

Slartibartfast

11:38 pm on Aug 2, 2004 (gmt 0)

YES! Thanks that worked great.

I am just strating to learn the DOM and what you gave me makes sense. It calls to the elements of the form and then checks or clears them depending on which option is chosen.
Right?

Also, if you don't mind more questions( I like to understand what I'm putting on a page and not just be given code):

Does the check in the function refer to the type of action to be carried out? Or is it an argument that exists just in that function?

Thanks a lot.

Bernard Marx

12:20 am on Aug 3, 2004 (gmt 0)

It calls to the elements of the form..

More specific than that.

form.elements

is a collection of the elements of the form. That's like an array. Its members can be referenced by index, but also by

id

, and

name

. Here, we reference an element by name, but since there are actually more than one with that name, the reference returned isn't a reference to an element, but an array of all the elements with that name (in fact, that may be a collection too).

Does the check in the function refer to the type of action to be carried out? Or is it an argument that exists just in that function?

It's just a local variable within the function, carrying

true¦¦false

, that is passed into the function with the function call. It could be called 'banana'.

No, I don't mind at all.

Slartibartfast

2:26 am on Aug 3, 2004 (gmt 0)

Great! Thanks a lot. That makes it more clearer. I know a decent amount of PHP but Javascript is just a tad different and I'm finally getting the gist of the structure.

Thanks again.