PHP-Javascript method for auto-selecting checkbox groups

P

Phil Powell

I am producing a form using PHP on the back end and Javascript on the
front end. The resulting script will come to the browser as follows:

Code: 
<script>
<!--
function selectAll() {
moveElement = eval("document.imageForm.move" + "[]");
alert(moveElement);
if (document.imageForm.select_all[0].checked) {
for (i = 0; i < document.imageForm.move.length; i++) {
document.imageForm.move[i].checked = true;
}
}
}

function deSelectAll() {
if (!document.imageForm.select_all[0].checked ||
document.imageForm.deselect_all[0].checked) {
for (i = 0; i < document.imageForm.move.length; i++) {
document.imageForm.move[i].checked = false;
}
}
}
//-->
</script>

This will work with a checkbox group that has to have this naming
convention for PHP:

Code: 
<input type=checkbox name=move[] value="myImage.gif"> - Move?

I will also have a checkbox that will "select all" and "de-select
all":

Code: 
<input type=checkbox name=select_all value=1 onChange="selectAll()"> -
Select All&nbsp;&nbsp;
<input type=checkbox name=deselect_all value=1
onChange="deSelectAll()"> - De-select All

I am not familiar at how Javascript can work with non-standard naming
conventions for event actions, can someone tell me what I'm doing
wrong? This fails at least in Mozilla 1.6

Thanx
Phil
 
M

Matt Kruse

Phil Powell said:
This will work with a checkbox group that has to have this naming
convention for PHP:
I will also have a checkbox that will "select all" and "de-select
all":
Click to expand...

Checkboxes don't have onChange() events, they have onclick() events.

If you want to ease your pain a bit, you could consider using my "Checkbox
Group" library, which would handle all this for you quite easily:
http://www.mattkruse.com/javascript/checkboxgroup/
 
T

The Nordic One

I'm sorry but please provide a very simple tutorial on this, you went so
far over my head that you were on Jupiter and I'm underground.

Phil
 
R

Reply Via Newsgroup

Phil said:
I am producing a form using PHP on the back end and Javascript on the
front end. The resulting script will come to the browser as follows:

Code: 
<script>
<!--
function selectAll() {
moveElement = eval("document.imageForm.move" + "[]");
alert(moveElement);
if (document.imageForm.select_all[0].checked) {
for (i = 0; i < document.imageForm.move.length; i++) {
document.imageForm.move[i].checked = true;
}
}
}

function deSelectAll() {
if (!document.imageForm.select_all[0].checked ||
document.imageForm.deselect_all[0].checked) {
for (i = 0; i < document.imageForm.move.length; i++) {
document.imageForm.move[i].checked = false;
}
}
}
//-->
</script>

This will work with a checkbox group that has to have this naming
convention for PHP:

Code: 
<input type=checkbox name=move[] value="myImage.gif"> - Move?

I will also have a checkbox that will "select all" and "de-select
all":

Code: 
<input type=checkbox name=select_all value=1 onChange="selectAll()"> -
Select All&nbsp;&nbsp;
<input type=checkbox name=deselect_all value=1
onChange="deSelectAll()"> - De-select All

I am not familiar at how Javascript can work with non-standard naming
conventions for event actions, can someone tell me what I'm doing
wrong? This fails at least in Mozilla 1.6

Thanx
Phil
Click to expand...


Your problem is reasonably common (search google groups for select box
and php and I'm sure you'll find a few recent posts (one or two from me)
related to this.

However... there are two methods that you can use to refer to an object
in a form in javascript - I'm a newbie (six months) but think I'm
getting pretty strong... someone though might have some other
method/solution... however, use something like

boxLength=document.forms["formGroups"].elements["userSelected[]"].length;

where by 'formGroups' is the name of your form and 'userSelect[]' is the
name of your select box.

Using my above example, boxLength would equal the total number of
selections in a multi-select box.

Also... put quotes around your INPUT TAG name field... thus

Use
<input type=checkbox name="move[]" value="myImage.gif"> not
<input type=checkbox name=move[] value="myImage.gif">
Click to expand...

as the [] might cause some grief on some web browsers...

Lastly - I just learned that a mis-use of eval is common - there are
other methods that you can use that use less resources and faster (for
example, from a numeric point of view you could use something like
parseInt() - Do a search on google groups for a recent message I got
which explains the reasons - search for "why is eval evil" in
comp.lang.javascript for a detailed explanation.

Hope something above gives you some help...

Regards
Randell D.
 
D

Dr John Stockton

JRS: In article <Gg1fc.110637$oR5.109407@pd7tw3no>, seen in
Reply Via Newsgroup <reply-to-
(e-mail address removed)> posted at Wed, 14 Apr 2004 02:23:34 :
- I'm a newbie (six months)
Click to expand...
Lastly - I just learned that a mis-use of eval is common - there are
other methods that you can use that use less resources and faster (for
example, from a numeric point of view you could use something like
parseInt() - Do a search on google groups for a recent message I got
which explains the reasons - search for "why is eval evil" in
comp.lang.javascript for a detailed explanation.
Click to expand...

For that, the OP should be referred to the c.l.j newsgroup FAQ. It's
generally better to cite a specific reference rather than to call for a
search.
 
P

Phil Powell

Following occurred when my colleague tested on his machine using IE
6.0 SP 4 for Win2000 (I am using Linux/Mozilla):

Ok, back to the drawing board, it didn't work when my colleague tested
on his machine using IE 6.0 SP4 for Win2K:

I tried with the HTML code below, but IE spat out the following:

Line: 42
Char: 1
Error: 'document.imageForm.move[]' is null or not an object
Code: 0
URL: file://C:\Documents and Settings\eduardo\Desktop\test.html

HTML code:

<html>
<head>
<title></title>
<body>
<script>
<!--
~ function selectAll(checkState, selectStatus, obj) {
~ if (document.imageForm.select_all.checked ||
document.imageForm.deselect_all.checked) {
~ for (i = 0; i < obj.length; i++) {
~ obj.checked = checkState;
~ }
~ if (selectStatus.toLowerCase() == 'select')
document.imageForm.deselect_all.checked = false;
~ if (selectStatus.toLowerCase() == 'deselect')
document.imageForm.select_all.checked = false;
~ }
}
//-->
</script>

<table>
<tr>
~ <td bgcolor=ffffff><a
href="./images/mu-spin/kyrka.jpg">kyrka.jpg</a></td>
~ <td bgcolor=ffffff>Show Metadata</td>
~ <td bgcolor=ffffff><input type=checkbox name="move[]"
value="kyrka.jpg"> - Move?</td>

</tr>
<tr>
~ <td bgcolor=ffffcc><a
href="./images/mu-spin/banner.jpg.jpeg">banner.jpg.jpeg</a></td>
~ <td bgcolor=ffffcc><a
href=index.php?section=image&action=edit&chooseAlbum=1&album=mu-spin&id=147>Show
Metadata</a></td>
~ <td bgcolor=ffffcc><input type=checkbox name="move[]"
value="banner.jpg.jpeg"> - Move?</td>
</tr>
<tr>

~ <td bgcolor=ffffff><a
href="./images/mu-spin/kyrka_gray.jpg">kyrka_gray.jpg</a></td>
~ <td bgcolor=ffffff><a
href=index.php?section=image&action=edit&chooseAlbum=1&album=mu-spin&id=145>Show
Metadata</a></td>
~ <td bgcolor=ffffff><input type=checkbox name="move[]"
value="kyrka_gray.jpg"> - Move?</td>
</tr>
<tr>
~ <td colspan=3 bgcolor=ddddee>
~ <input type=checkbox name="select_all" value=1
onClick="selectAll(true, 'select', document.imageForm['move[]'])"> -
Select All&nbsp;&nbsp;<input type=checkbox name="deselect_all" value=1
onClick="selectAll(false, 'deselect', document.imageForm['move[]'])">
-
De-Select All</td>

</tr>
</table>
</body>
</html>

Phil
 
M

Matt Kruse

Phil Powell said:
Following occurred when my colleague tested on his machine using IE
6.0 SP 4 for Win2000 (I am using Linux/Mozilla):
Click to expand...

Aren't you missing a <form> tag entirely?
 
T

The Nordic One

No I just forgot to include it within the code I pasted here. Here is
the corrected code that now works in IE, Opera, Konqueror and Mozilla,
according to tests I did and a colleague did:

<form name="imageForm" method=post action=index.php
onSubmit='setHasSelectedAlbum(); return willMoveImages("Any metadata
associated with the images moved will be altered by moving the images.
Are you sure?")'>
<tr>

<td colspan=6>
<script type="text/javascript">
<!--
function willMoveImages(msg) {
confirmWindow = window.confirm(msg);
if (confirmWindow) return true;
return false;
}
//-->
</script>
<noscript>
<!-- Noscript option -->
</noscript>


<table border=0 width=100%>
<tr>
<td bgcolor=eeeedd colspan=3><a
href=index.php?section=image&action=edit&chooseAlbum=1&album=mu-spin>Go
back to your previous listing</a></td>

</tr>
<tr>
<td bgcolor=ddddee>Image (click to view)</td> <td
bgcolor=ddddee>Click to view image metadata if link is found</td> <td
bgcolor=ddddee>&nbsp;</td>
</tr>
<script type="text/javascript">
<!--

var hasSelectedAlbum = false;

function setHasSelectedAlbum() {
if (!hasSelectedAlbum) hasSelectedAlbum = true;
}

function selectAll(checkState, selectStatus, obj) {
if (document.imageForm.select_all.checked ||
document.imageForm.deselect_all.checked) {
for (i = 0; i < obj.length; i++) {
obj.checked = checkState;
}

if (selectStatus.toLowerCase() == 'select')
document.imageForm.deselect_all.checked = false;
if (selectStatus.toLowerCase() == 'deselect')
document.imageForm.select_all.checked = false;
}
}
//-->
</script>
<noscript>
<!-- THERE IS NO NON-JAVASCRIPT EQUIVALENT TO THIS CODE -->

</noscript>


<tr>
<td bgcolor=ffffff><a
href="./images/mu-spin/kyrka.jpg">kyrka.jpg</a></td>
<td bgcolor=ffffff>Show Metadata</td>
<td bgcolor=ffffff><input type=checkbox id="selectable0" name="move[]"
value="kyrka.jpg"> - Move?</td>
</tr>

<tr>
<td bgcolor=ffffcc><a
href="./images/mu-spin/banner.jpeg">banner.jpeg</a></td>
<td bgcolor=ffffcc><a
href=index.php?section=image&action=edit&chooseAlbum=1&album=mu-spin&id=
147>Show Metadata</a></td>
<td bgcolor=ffffcc><input type=checkbox id="selectable1" name="move[]"
value="banner.jpeg"> - Move?</td>
</tr>
<tr>
<td bgcolor=ffffff><a
href="./images/mu-spin/kyrka_gray.jpg">kyrka_gray.jpg</a></td>

<td bgcolor=ffffff><a
href=index.php?section=image&action=edit&chooseAlbum=1&album=mu-spin&id=
145>Show Metadata</a></td>
<td bgcolor=ffffff><input type=checkbox id="selectable2" name="move[]"
value="kyrka_gray.jpg"> - Move?</td>
</tr>
<tr>
<td colspan=3 bgcolor=ddddee>
<input type=checkbox id="checkall" name="select_all" value=1
onClick="selectAll(true, 'select', document.imageForm['move[]'])"> -
Select All&nbsp;&nbsp;

<input type=checkbox id="uncheckall" name="deselect_all" value=1
onClick="selectAll(false, 'deselect', document.imageForm['move[]'])"> -
De-Select All</td>
</tr>
Click to expand...


This seems to work across the board! Thanx for the tip on "onClick".
Now to figure out how to determine if the user selected an item from the
dropdown to change hasSelectedAlbum. I can't use the "onChange" event
within the dropdown because the PHP code that generates the dropdown is
shared across multiple instances.

Phil


Phil
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Survey details won't go through using php, ajax, Mysql 0
Can't execute php to delete multiple rows in database 3
How to display input options only after selecting an option from the 'select class' tag JS? 6
Page do not work, when adding php code 1
Checking dynamically populated data using ajax with user entered value 5
Woocommerce Product Add-ons - Auto-select first option 1
I dont get this. Please help me!! 2
newbie Javascript checked is null or not an object 6

Members online

No members online now.
Total: 38 (members: 1, guests: 37)
Robots: 211

Forum statistics

Threads
473,756
Messages
2,569,535
Members
45,008
Latest member
obedient dusk

Latest Threads

Top