Javascript with forms

[Marc]

Is there a way to produce 3 radio buttons, which when one is selected,
enables 11 check boxes which are otherwise disabled (greyed out)?

EXAMPLE:

Option 1 --Radio buttons
Option 2
Option 3

1 2 3 ... 11 --Check boxes, all disabled unless 'Option 3' is selected

I hope I'm making myself clear...

Marc

 

[RobG]

Is there a way to produce 3 radio buttons, which when one is selected,
enables 11 check boxes which are otherwise disabled (greyed out)?

EXAMPLE:

Option 1 --Radio buttons
Option 2
Option 3

1 2 3 ... 11 --Check boxes, all disabled unless 'Option 3' is selected

I hope I'm making myself clear...

The following should do something like what you want. setTimeout is
used to run the function when the form is clicked so that if reset it
clicked, it has time to reset the form before runCheck is run.

If JavaScript is disabled, the checkboxes aren't disabled else users can
never select them. You may want to clear the checkboxes when disabling
them too - it's up to you.

<script type="text/javascript">

function doCheck(el, cbGroup)
{
var elChecked = el.checked;
if (cbGroup && cbGroup.length){
var i = cbGroup.length;
while (i--){
cbGroup.disabled = !elChecked;

// Uncomment the following if boxes are to
// be unchecked when disabled
// if (!el.checked) cbGroup.checked = false;

}
}
}

function runChecks()
{
if ( !document.getElementById
|| !document.getElementsByTagName ){
return;
}
var el = document.forms[0].elements['rg-1'][2];
var div = document.getElementById('checkGroup');
var cbGroup = div.getElementsByTagName('input');
doCheck(el, cbGroup);
}

window.onload = runChecks;

</script>
<!--
setTimeout used for onclick to allow reset to run before
runChecks runs
-->
<form action="" onclick="setTimeout('runChecks()',50);">
<div>
<input type="radio" name="rg-1" checked>Opt one<br>
<input type="radio" name="rg-1">Opt two<br>
<input type="radio" name="rg-1">Opt three<br>
</div>
<div id="checkGroup">
<input type="checkbox" name="cb-1">Check 1
<input type="checkbox" name="cb-2">Check 2
<input type="checkbox" name="cb-3">Check 3<br>
</div>
<div>
<input type="reset">
</div>
</form>

 

[Erwin Moller]

Is there a way to produce 3 radio buttons, which when one is selected,
enables 11 check boxes which are otherwise disabled (greyed out)?

EXAMPLE:

Option 1 --Radio buttons
Option 2
Option 3

1 2 3 ... 11 --Check boxes, all disabled unless 'Option 3' is selected

I hope I'm making myself clear...

Marc

Hi Marc,

Try something like this:
1) Name your radiobuttons (of course):eg myGroup
2) Add to each button a onClick eventhandler: checkIt()

You'll end up with something like this:

<form action="bla.php" name="orderform" Method="Post">
<input type="radion" name="myGroup" value="eggs" checked
onClick="checkIt('off');">eggs<br>
<input type="radion" name="myGroup" value="apples"
onClick="checkIt('off');">apples<br>
<input type="radion" name="myGroup" value="pears"
onClick="checkIt('on');">pears and subquestions active<br>

<br>
<input type="checkbox" name="bla1"> checkbox1<br>
<input type="checkbox" name="bla2"> checkbox2<br>
<input type="checkbox" name="bla3"> checkbox3<br>
</form>
In the above case the third option will enable the radiobuttons.

3) get the checked radiobutton
function checkIt(onoff){
var disabledcheckboxes = (onoff == 'off');
document.forms.orderForm.bla1.disabled = disabledcheckboxes;
document.forms.orderForm.bla2.disabled = disabledcheckboxes;
document.forms.orderForm.bla3.disabled = disabledcheckboxes;

}
}

Not tested, just some code to get you going.
In the above example I just send 'on' or 'off' to the function to decide
what to do.
If you want you can also loop over all radiobuttons and test for the one
that is checked, by checking the checked-property (will return true or
false).

Good luck,

Regards,
Erwin Moller

 

[Marc]

Thanks for your help. Please see my responses below.

The following should do something like what you want. setTimeout is
used to run the function when the form is clicked so that if reset it
clicked, it has time to reset the form before runCheck is run.

I don't need a reset button - this page is to be used as part of an
administration section, so presumably I can remove the setTimeout()
function?

If JavaScript is disabled, the checkboxes aren't disabled else users can
never select them. You may want to clear the checkboxes when disabling
them too - it's up to you.

I know JavaScript won't be disabled, as I know the environment the users
are running, do I need modify the script at all?

<script type="text/javascript">

function doCheck(el, cbGroup)
{
var elChecked = el.checked;
if (cbGroup && cbGroup.length){
var i = cbGroup.length;
while (i--){
cbGroup.disabled = !elChecked;

// Uncomment the following if boxes are to
// be unchecked when disabled
// if (!el.checked) cbGroup.checked = false;

}
}
}

function runChecks()
{
if ( !document.getElementById
|| !document.getElementsByTagName ){
return;
}
var el = document.forms[0].elements['rg-1'][2];
var div = document.getElementById('checkGroup');
var cbGroup = div.getElementsByTagName('input');
doCheck(el, cbGroup);
}

window.onload = runChecks;

</script>
<!--
setTimeout used for onclick to allow reset to run before
runChecks runs
-->
<form action="" onclick="setTimeout('runChecks()',50);">
<div>
<input type="radio" name="rg-1" checked>Opt one<br>
<input type="radio" name="rg-1">Opt two<br>
<input type="radio" name="rg-1">Opt three<br>
</div>
<div id="checkGroup">
<input type="checkbox" name="cb-1">Check 1
<input type="checkbox" name="cb-2">Check 2
<input type="checkbox" name="cb-3">Check 3<br>
</div>
<div>
<input type="reset">
</div>
</form>

I don't understand how the JavaScript detects which radio button is
selected, if all are called rg-1... Sorry, my knowledge of JS is
limited, would you mind explaining?

Marc

 

[RobG]

Thanks for your help. Please see my responses below.



I don't need a reset button - this page is to be used as part of an
administration section, so presumably I can remove the setTimeout()
function?

Yes, but I think reset buttons are really handy...

I know JavaScript won't be disabled, as I know the environment the users
are running, do I need modify the script at all?

You could make all the checkboxes disabled by default and remove the
window.onload line. That would also let the reset button work properly
without the setTimeout (if you decide to keep it that is... ).

<script type="text/javascript">

function doCheck(el, cbGroup)
{
var elChecked = el.checked;
if (cbGroup && cbGroup.length){
var i = cbGroup.length;
while (i--){
cbGroup.disabled = !elChecked;

// Uncomment the following if boxes are to
// be unchecked when disabled
// if (!el.checked) cbGroup.checked = false;

}
}
}

function runChecks()
{
if ( !document.getElementById
|| !document.getElementsByTagName ){
return;
}
var el = document.forms[0].elements['rg-1'][2];

This line gets a reference to the radio button to use for the check
- document.forms[0] is the form
- elements['rg-1'] is the collection of radio buttons
- [2] is the third button (the numbering starts from 0)

This line gets a reference to the div containing the checkboxes

And this one uses the div reference to get a reference to the collection
of input elements inside the div.

This line passes the element and collection references to doCheck

}

[...]



I don't understand how the JavaScript detects which radio button is
selected, if all are called rg-1... Sorry, my knowledge of JS is
limited, would you mind explaining?

Radio buttons in a group must all have the same name. You can access
them by their index within the radio group collection (see above).

By putting the onclick on the form, a click on any child element will
bubble up and run the form's onclick. It saves putting the onclick on
all three radio buttons.