Please help me with checkbox script

**johnmate** · 04-21-2006, 08:51 AM

Hi there,

I am working on a project where I need a checkbox script. I looked on the internet but couldn't find something that I could use.

I need the following:

I have a page with 3 checkboxes. For example with red, yellow and white. The moment I check on of them the value must appear somewhere on the page (doesn't matter where) but not in an alertbox or something but really in the page. When I check more than one they have to appear like this: red, yellow, white. Seperated with a commma (The order is not important). Can someone give me an example of a javascript for this?

Hope you can help me.

Greets,

John

**jscheuer1** · 04-21-2006, 07:03 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function valuate(){
var txt=''
var colors=document.getElementsByName('color')
for (var i_tem = 0; i_tem < colors.length; i_tem++)
if (colors[i_tem].checked)
txt+=', '+colors[i_tem].value
txt=txt.replace(/^, /, '')
document.getElementById('chkr').innerHTML=txt
}

</script>
</head>
<body>
<input type="checkbox" name="color" value="red" onclick="valuate()"><br>
<input type="checkbox" name="color" value="yellow" onclick="valuate()"><br>
<input type="checkbox" name="color" value="white" onclick="valuate()"><br>
<span id="chkr"></span>
</body>
</html>

**johnmate** · 04-28-2006, 09:13 PM

A bit late but thanks for the script! Just what I need

**dbcooper** · 02-15-2007, 03:44 PM

How could I modify the above script to have it post the combined value (red,yellow,white) into a hidden field on a form that would be submitted as one value rather than the individual checkbox values?

**jscheuer1** · 02-15-2007, 05:12 PM

This would make your form javascript dependant (not a very good idea on the web) but, to answer your question:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function valuate(){
var txt=''
var colors=document.getElementsByName('color')
for (var i_tem = 0; i_tem < colors.length; i_tem++)
if (colors[i_tem].checked)
txt+=' '+colors[i_tem].value
txt=txt.replace(/^ /, '')
document.getElementById('chkr').value=txt
}

</script>
</head>
<body>
<input type="checkbox" name="color" value="red" onclick="valuate()"><br>
<input type="checkbox" name="color" value="yellow" onclick="valuate()"><br>
<input type="checkbox" name="color" value="white" onclick="valuate()"><br>
<form action="#">
<input name="colors" type="hidden" id="chkr">
<input type="submit" value="Go!">
</form>
</body>
</html>

**dbcooper** · 02-15-2007, 06:33 PM

Sorry if I wasn't clear, but in order to use this with my existing perl forms-handling script, I need to end up with an input tag that looks like this:

<input name="colors" type="hidden" value="chkr">

**jscheuer1** · 02-15-2007, 07:15 PM

You could do:

Code:

<input id="chkr" name="colors" type="hidden" value="chkr">

If that isn't acceptable, the script and markup could be modified to:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

function valuate(){
var txt=''
var colors=document.getElementsByName('color')
for (var i_tem = 0; i_tem < colors.length; i_tem++)
if (colors[i_tem].checked)
txt+=' '+colors[i_tem].value
txt=txt.replace(/^ /, '')
document.forms['form1']['colors'].value=txt
}

</script>
</head>
<body>
<input type="checkbox" name="color" value="red" onclick="valuate()"><br>
<input type="checkbox" name="color" value="yellow" onclick="valuate()"><br>
<input type="checkbox" name="color" value="white" onclick="valuate()"><br>
<form name="form1" action="#">
<input name="colors" type="hidden" value="chkr">
<input type="submit" value="Go!">
</form>
</body>
</html>

However, no matter what you do, the value of the hidden input will be changed by the javascript. That's how forms pass data. If you are already using Perl, there may be a way to use it instead of javascript. That would be better as, it would not leave out non-javascript enabled browsers.

**dbcooper** · 02-15-2007, 08:24 PM

Many thanks for your help, John, got it to work with some tweaks for this particular form.

I hear you clearly on the less-than-best use of javascript on a form, but it will work for this application.

**vaibhav24in** · 02-18-2007, 11:31 AM

jscheuer1 You are really senior coder. (bows with respect)

Thread: Please help me with checkbox script

Thread Tools

Search Thread

Please help me with checkbox script

Bookmarks

Bookmarks

Posting Permissions