Making check boxes active on selection of radio button...

M

Mark

Hi yall

I have been looking for a way to do the following

I have a form for entry to an event

People can choose whether they want to

1 Come for the whole week
2 Come for the first weekend
3 Come for the last weekend
4 Come for the midweek days
5 Come for days that they specify

Radio buttons are used to select their option.

What I want is for there to be 8 check boxes under option 5 THAT ARE
ONLY ACTIVE IF THEY SELECT OPTION 5. In otherwords they are greyed out
unless they select option 5.

I have seen it done before, but foolishly did not look at the source
code to see how it was done.

My attempts to find anything on the Internet have come to nothing...

Any <form> gurus out there who can help me?

TIA

Mark
 
D

dorayme

Mark said:
Hi yall

I have been looking for a way to do the following

I have a form for entry to an event

People can choose whether they want to

1 Come for the whole week
2 Come for the first weekend
3 Come for the last weekend
4 Come for the midweek days
5 Come for days that they specify

Radio buttons are used to select their option.

What I want is for there to be 8 check boxes under option 5 THAT ARE
ONLY ACTIVE IF THEY SELECT OPTION 5. In otherwords they are greyed out
unless they select option 5.

I have seen it done before, but foolishly did not look at the source
code to see how it was done.

My attempts to find anything on the Internet have come to nothing...

Any <form> gurus out there who can help me?

TIA

Mark
Click to expand...

Hi Mark, I can help you on this as I am a bit of an expert in
this area as you know.

Make the 5 and all its checkboxes an image with greyed out
checkboxes.

If it is clicked, another page will load and the checkboxes will
be real ones.

It's ok. Anytime you need help, I am here.

Notice how we needed the weather to help us against those tricky
bastds, the safricans?

dorayme
 
M

Mark Parnell

Deciding to do something for the good of humanity, Mark
What I want is for there to be 8 check boxes under option 5 THAT ARE
ONLY ACTIVE IF THEY SELECT OPTION 5. In otherwords they are greyed out
unless they select option 5.
Click to expand...

There is no way of doing this in HTML. You will need some sort of
client-side scripting (e.g. Javascript). Use Javascript to disable the
checkboxes on page load (that way anyone with JS disabled/unavailable
can still use them). You would need probably an onclick event on the
radio button to call a function that enables the checkboxes (and one on
the other radio buttons to disable them again).

Of course you still need to validate the data properly server-side (i.e.
ignore the checkboxes unless option 5 is selected).
 
M

Malte Christensen

Mark said:
Hi yall

I have been looking for a way to do the following

I have a form for entry to an event

People can choose whether they want to

1 Come for the whole week
2 Come for the first weekend
3 Come for the last weekend
4 Come for the midweek days
5 Come for days that they specify
Click to expand...

I have done a lot of that, recently:

In my case the users should be able to select an item from a dropdown
control. Depending on the value, tabbing order on the page was to be
changed, some items greyed out, DIV's to be shown, buttons to
appear/disappear.

JavaScript, as much as I hate it, can do all that.
 
X

X l e c t r i c

I'm no guru, but the code below works.

Mark Parnell has a good point about being user friendly for those who
have JavaScript disabled. To accomplish that, in the code below:

remove disabled="disabled" from the checkboxes.

and change the body to:

<body onload="setForm();">

Also, some text explaining that clicking on that radio button enables
the following checkboxes would be nice.

You can change the radio button and checkbox names/values to what you
want. Just make sure the checkboxes all have the same name. Also make
sure you change the names in the statements in the changeChek() and
setForm() functions in the JavaScript program.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function changeChek()
{
for (var i = 0; i < document.fone.cone.length; i++)
{
document.fone.cone.disabled = false;
}
}
function setForm()
{
document.fone.reset();
for (var i = 0; i < document.fone.cone.length; i++)
{
document.fone.cone.disabled = true;
}
}
//-->
</script>
</head>
<body>
<form action="" name="fone">
<div>
<input type="radio" name="rone" value="rad" onclick="changeChek();">
<p>
<input type="checkbox" name="cone" value="chek1" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek2" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek3" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek4" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek5" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek6" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek7" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek8" disabled="disabled">
<p>
<input type="button" value="Reset" onclick="setForm();">
</div>
</form>
</body>
</html>
 
E

Ed Jay

Mark said:
Hi yall

I have been looking for a way to do the following

I have a form for entry to an event

People can choose whether they want to

1 Come for the whole week
2 Come for the first weekend
3 Come for the last weekend
4 Come for the midweek days
5 Come for days that they specify

Radio buttons are used to select their option.

What I want is for there to be 8 check boxes under option 5 THAT ARE
ONLY ACTIVE IF THEY SELECT OPTION 5. In otherwords they are greyed out
unless they select option 5.

I have seen it done before, but foolishly did not look at the source
code to see how it was done.

My attempts to find anything on the Internet have come to nothing...

Any <form> gurus out there who can help me?
Click to expand...
I'm not a guru, but I recently went through the same exercise. I ended up
using a simple javascript to toggle the CSS display property of a <div
style="display:none";>. When I press button 5, the five new choices
suddenly appear as now-displayed checkboxes. See what I mean at
http://www.edbj.aes-intl.com/pg4disp.html. Click on any of the checkbox or
buttons.
 
E

Ed Jay

Malte Christensen said:
I have done a lot of that, recently:

In my case the users should be able to select an item from a dropdown
control. Depending on the value, tabbing order on the page was to be
changed, some items greyed out, DIV's to be shown, buttons to
appear/disappear.

JavaScript, as much as I hate it, can do all that.
Click to expand...

I've grown to love javascript. Why do you hate it?
 
M

Mark

Hi Ed

This was the KILLER response I was looking for!!!

Thanks for this my man! This will sort me right out :eek:)

Thanks to everyone else for their responses too...

Mark
 
M

Mark

Yo Xlectric

Thanks for this! You have just made my life a little bit easier!

I have been working on this job for over 24hrs solid now and knowing
that I have a fix for this particular issue makes my be bed seem just
that little bit closer

I LOVE USENET

Mark
 
M

Mark

This code will be perfect for my purposes apart from one thing...

I havent managed to work out how to get the check boxes to become
disabled if I select a different radio button...

For eaxample

<input type="radio" name="rone" value="1"> <-- When this is selected the
check boxes should become disabled...
<p>
<input type="radio" name="rone" value="2" onclick="changeChek();"><--
when this is selected the checkboxes are enabled as expected...
<p>
<input type="checkbox" name="cone" value="chek1" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek2" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek3" disabled="disabled">

Have I missed something obvious?

TIA

Mark
 
M

Malte Christensen

Ed said:
I've grown to love javascript. Why do you hate it?
Click to expand...
untyped, unintuitive (I am a Java kind of person), poor debugging,
abysmal performance.

Those just off the top of my head ;-)
 
X

X l e c t r i c

Ed Jay wrote:
"I ended up using a simple javascript to toggle the CSS display property
of a <div style="display:none";>. When I press button 5, the five new
choices suddenly appear as now-displayed checkboxes. See what I mean at
http://www.edbj.aes-intl.com/pg4disp.html. Click on any of the checkbox
or buttons."

Mark wrote:
"I havent managed to work out how to get the check boxes to become
disabled if I select a different radio button..."

I actually prefer Ed's DHTML version. You might want to consider that.
You could have the checkboxes for all "eight" (pun intended) days of the
week in one row, and have them appear when the fifth radio button is
clicked.

I added a conditional to the changeChek() function.

I'm just winging it on these form and element names. They have to be the
same as what you have in your server side program. If the checkboxes
there all have different names then what I'm doing will have to be
changed. Maybe put the names in an Array, run it through a loop, and use
the DOM. Or something like that.

Later, Art.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function changeChek()
{
for (var i = 0; i < document.fone.cone.length; i++)
{
if (document.fone.rone[4].checked == true)
{
document.fone.cone.disabled = false;
}
else
{
document.fone.cone.disabled = true;
document.fone.cone.checked = false;
}
}
}
function setForm()
{
document.fone.reset();
for (var i = 0; i < document.fone.cone.length; i++)
{
document.fone.cone.disabled = true;
}
}
//-->
</script>
</head>
<body>
<form action="" name="fone">
<div>
<input type="radio" name="rone" value="rad1" onclick="changeChek();"> 1
Come for the whole week
<p>
<input type="radio" name="rone" value="rad2" onclick="changeChek();"> 2
Come for the first weekend
<p>
<input type="radio" name="rone" value="rad3" onclick="changeChek();"> 3
Come for the last weekend
<p>
<input type="radio" name="rone" value="rad4" onclick="changeChek();"> 4
Come for the midweek days
<p>
<input type="radio" name="rone" value="rad" onclick="changeChek();"> 5
Come for days that they specify
<p>
<input type="checkbox" name="cone" value="chek1" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek2" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek3" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek4" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek5" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek6" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek7" disabled="disabled">
<p>
<input type="checkbox" name="cone" value="chek8" disabled="disabled">
<p>
<input type="button" value="Reset" onclick="setForm();">
</div>
</form>
</body>
</html>
 
E

Ed Jay

Malte Christensen said:
untyped, unintuitive (I am a Java kind of person), poor debugging,
abysmal performance.

Those just off the top of my head ;-)
Click to expand...

I guess that in my joy at being able to do as I need, I've overlooked the
[valid] issues you cite.
 
E

Ed Jay

Mark said:
Hi Ed

This was the KILLER response I was looking for!!!

Thanks for this my man! This will sort me right out :eek:)

Thanks to everyone else for their responses too...
Click to expand...
Here are the js:

function show(cont_id) {
target = document.getElementById(cont_id)
target.style.display = "";
}

function hide(cont_id) {
target = document.getElementById(cont_id)
target.style.display = "none";
}

function toggle(what,targetId) {
target = document.getElementById(targetId);
target.style.display = (what.checked)?'':'none';
}
 
J

Jonathan N. Little

Malte said:
untyped, unintuitive (I am a Java kind of person), poor debugging,
abysmal performance.

Those just off the top of my head ;-)
Click to expand...

You must just LOVE Perl and PHP! ;-)

Actually debugging is not bad, except if you try with IE! Gecko browsers
with the JavaScript Console give you error and CORRECT line number where
error occurs. Funny old NN4x would pick up the subtlest errors, but of
course useless with DOM!
 
J

Jonathan N. Little

Ed said:
Here are the js:

function show(cont_id) {
target = document.getElementById(cont_id)
target.style.display = "";
}

function hide(cont_id) {
target = document.getElementById(cont_id)
target.style.display = "none";
}

function toggle(what,targetId) {
target = document.getElementById(targetId);
target.style.display = (what.checked)?'':'none';
}
Click to expand...
Just a note Ed you got a little error in your code,

<your code>

<b>Was patient prepared for examination consistent with recommended
protocol?</b>&nbsp;&nbsp;Yes<input type=radio name="cbt" value="0"
onClick = "hide('div4');clearButs('proto',4);clearProto();" checked>

</your code>

but your function is 'clearBut':

function clearBut(suffix,count) {
var i=0;
while (i < count) {
window.document.form1.elements[suffix+(i)].checked=false;
i++;}
 
E

Ed Jay

Jonathan N. Little said:
Just a note Ed you got a little error in your code,

<your code>

<b>Was patient prepared for examination consistent with recommended
protocol?</b>&nbsp;&nbsp;Yes<input type=radio name="cbt" value="0"
onClick = "hide('div4');clearButs('proto',4);clearProto();" checked>

</your code>
Click to expand...

I don't think you went far enough in my code...

Left:<input type=checkbox name=symp_brl value=1
onClick="toggle(this,'div2l');clearSympLeft();hide('div3l');clearSymp();"></div>
----------------^
<div class=yes_no_right style="float:left;">
Right:<input type=checkbox name=symp_brr value=1
onClick="toggle(this,'div2r')
^
but your function is 'clearBut':

function clearBut(suffix,count) {
var i=0;
while (i < count) {
window.document.form1.elements[suffix+(i)].checked=false;
i++;}
Click to expand...

clearBut(suffix,count) is a function to clear all buttons.
 
J

Jonathan N. Little

^
error is here --------------------^
</your code>
Click to expand...


I don't think you went far enough in my code...

Left:<input type=checkbox name=symp_brl value=1
onClick="toggle(this,'div2l');clearSympLeft();hide('div3l');clearSymp();"></div>
----------------^
<div class=yes_no_right style="float:left;">
Right:<input type=checkbox name=symp_brr value=1
onClick="toggle(this,'div2r')
^
but your function is 'clearBut':

function clearBut(suffix,count) {
var i=0;
while (i < count) {
window.document.form1.elements[suffix+(i)].checked=false;
i++;}
Click to expand...


clearBut(suffix,count) is a function to clear all buttons.
Click to expand...

No Ed, it's not with toggle function, but in your HTML your call for
clearBut*s* not clearBut function see above...
 
E

Ed Jay

Jonathan N. Little said:
^
error is here --------------------^
</your code>
Click to expand...


I don't think you went far enough in my code...

Left:<input type=checkbox name=symp_brl value=1
onClick="toggle(this,'div2l');clearSympLeft();hide('div3l');clearSymp();"></div>
----------------^
<div class=yes_no_right style="float:left;">
Right:<input type=checkbox name=symp_brr value=1
onClick="toggle(this,'div2r')
^
but your function is 'clearBut':

function clearBut(suffix,count) {
var i=0;
while (i < count) {
window.document.form1.elements[suffix+(i)].checked=false;
i++;}
Click to expand...


clearBut(suffix,count) is a function to clear all buttons.
Click to expand...

No Ed, it's not with toggle function, but in your HTML your call for
clearBut*s* not clearBut function see above...
Click to expand...

Got it! Thank you. Thank you. It would have taken me days to figure out
what was going wrong. :)
 

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

How can I arrange a series of radio buttons? 2
Check forms With JavaScript 1
I dont get this. Please help me!! 2
Changing Selection Boxes Problem?? 0
radio button, check for use 1
radio button, check for use 1
How to display input options only after selecting an option from the 'select class' tag JS? 6
Survey details won't go through using php, ajax, Mysql 0

Members online

Total: 30 (members: 1, guests: 29)
Robots: 205

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,023
Latest member
websitedesig25

Latest Threads

Top