...

View Full Version : Disabling Checkboxes



holty
02-10-2004, 02:58 PM
Hi

I am creating a form with a series of questions on it (like a questionnaire)

If I have a question that allows the user to check a 1 of 4 checkboxs - how can I disable the other 3 when 1 is selected?

This will need to work in netscape too - any ideas?

Choopernickel
02-10-2004, 04:13 PM
First, use radio buttons. They and checkboxes serve different purposes, and what you're going after (single-selectable) is definitely a radio button function. That said, peep this:

<html>
<head>
<script type="text/javascript">
function disableRadios (e) {
if (!e) {
e = window.event;
}
if (this == window) {
return;
}
var i = this.form.elements.length,
el;
while (i) {
el = this.form.elements[--i];
if (el.type == 'radio' && el.name == this.name && !el.checked) {
el.disabled = true;
}
}
}
window.onload = function (e) {
var i = document.forms[0].elements.length,
el;
while (i) {
el = document.forms[0].elements[--i];
if (el && typeof(el.type) != 'undefined' && el.type == 'radio') {
el.onclick = disableRadios;
}
}
}
</script>
</head>
<body>
<form>
<input type="radio" name="myRadio" value="1" /> 1
<input type="radio" name="myRadio" value="2" /> 2
<input type="radio" name="myRadio" value="3" /> 3
<input type="radio" name="myRadio" value="4" /> 4
</form>
</body>
</html>

It looks more complex than it is; primarily because I prefer to keep all scripting outside the HTML. You could just as easily remove the window.onload handler and assign the onclick function in the input tag if you want.

Roy Sinclair
02-10-2004, 04:15 PM
If I have a question that allows the user to check a 1 of 4 checkboxs - how can I disable the other 3 when 1 is selected?

Use Radio Buttons instead of checkboxes, the radio button functionality is that only one can be checked.

Checkboxes are for multiple choices, Radio buttons are for exclusive choices.

holty
02-11-2004, 01:56 PM
Thats great I will go for radio's instead....

One more question - how can I check to see if a radio has been selected when submitting a form?

Thanks

RadarBob
02-11-2004, 02:50 PM
Originally posted by holty
One more question - how can I check to see if a radio has been selected when submitting a form?
You really don't have to. Only the radio button that was selected is sent in the form when SUBMITTED. Likewise only those checkboxes checked are sent. Likewise only those <select> options that were selected are sent.

Also note: it's the "value" attribute that's sent, not the text that the user sees on the screen.

holty
02-11-2004, 04:32 PM
RadarBob - I realise that its the value that is passed through the form.

If the radio is mandatory - and the user doesn't select an option, I would like an alert when the form is submitted.

I have done this in the past for text boxes like:

function validRequired(formField,fieldLabel)
{
var result = true;

if (formField.value == "")
{
alert('Please enter a value for the "' + fieldLabel +'" field.');
formField.focus();
result = false;
}

return result;
}

function validateForm(frmMain)
{

if (!validRequired(frmMain.txtName,"Name"))
return false;

// validation passed return true
return true;
}

Any ideas on doing this with a radio?

Thanks

RadarBob
02-11-2004, 04:53 PM
sure, something like this:


function pickedButton (theRadioButtonSet) {
var buttonPicked = false;

for (var i=0; i<theRadioButtonSet.length; i++) {
if (theRadioButtonSet[i].checked == true) {
buttonPicked = true;
}
}

return buttonPicked;
}

// call the function from somewhere
pickedButton(theFormName.theRadioButtonName);

glenngv
02-12-2004, 06:43 AM
You can do a for loop exit once a checked item is detected.


for (var i=0; i<theRadioButtonSet.length; i++) {
if (theRadioButtonSet[i].checked == true) {
buttonPicked = true;
break;
}
}

holty
02-12-2004, 03:58 PM
Hi

I can't seem to get it to work for some reason - here is my code:



<script Language="JavaScript">
function validSelectRequired(formField,fieldLabel)
{
var result = true;

if (formField.options[formField.selectedIndex].value == "")
{
alert('Please enter a value for the "' + fieldLabel +'" field.');
formField.focus();
result = false;
}

return result;
}


function pickedButton (theRadioButtonSet) {
var buttonPicked = false;

for (var i=0; i<theRadioButtonSet.length; i++) {
if (theRadioButtonSet[i].checked == true) {
buttonPicked = true;
}
}

return buttonPicked;
}





function validateForm(frmSurvey)
{

if (!validSelectRequired(frmSurvey.cboQ1,"Question 1"))
return false;




// call the function from somewhere
pickedButton(frmSurvey.Q2);

// validation passed return true
return true;
}
</script>

holty
02-12-2004, 03:59 PM
It picks up the select box that isn't filled in but doesn't detect when the radio button for 'Q2' is not filled in

holty
02-12-2004, 04:13 PM
I changed the:



// call the function from somewhere
pickedButton(frmSurvey.Q2);


to:



// call the function from somewhere
if (!pickedButton(frmSurvey.Q2,"Question 2"))
return false;


And it works but doesn't display the message even though I have changed the function to:



function pickedButton (theRadioButtonSet) {
var buttonPicked = false;

for (var i=0; i<theRadioButtonSet.length; i++) {
if (theRadioButtonSet[i].checked == true) {
alert('Please enter a value for the "' + fieldLabel +'" field.');
formField.focus();
buttonPicked = true;
}
}

return buttonPicked;
}


any ideas? - I would like a message to appear (there are 18 radio questions on my form!)

Willy Duitt
02-12-2004, 04:19 PM
Try removing the double quotes in your alert.

RadarBob
02-12-2004, 05:35 PM
Hope this does not confuse the issue!...

Here is how I see the "big picture" validation code structure should be.

Use a "main" validation function that calls each field validation function. Thus there is a "master" validation flag and a "master" error message. The assumption is that the form is valid until we find something invalid.

Each function returns a boolean that tells if validation was successful for that field. Each function appends it's "personal" error message to the "master" error message. Note that because each "business rule" has it's own personal error message, the code becomes somewhat self-documenting and we *precisely* tell the user what's wrong for each "business rule" violation.

Since any one invalid field makes the entire form invalid, we just set the master flag on every field validation call. After all the field validation function calls, the master flag is set properly & the master error message has all the "personal" messages on it.

This general scheme makes the validation code easier to modify when you add or delete fields from your form.

Bottom Line
When your user clicks on the SUBMIT button, the main validation routine is called. If any field is invalid that FALSE cascades back up, and because the main routine returns FALSE the SUBMIT process stops (that's the way SUBMIT works with forms) and the alert error message is on the screen.



function validateForm (theForm) {
var validForm = true;

// note I did not put "var" on this variable - now it's got global scope, so other functions can use it.
errorMsg = new String ("Your form has these problems:\n");

validForm = validateThisField (theForm.thisField);
validForm = validateThatField (theForm.thatField);
validForm = pickedButton (theForm.buttonName);

if (!validForm) {
alert (errorMsg); // only show the message if there were errors
}

return validForm;
}

function validateThisField (theField) {
var validField = true;

if (theField = "") }
errorMsg += "\nwhateverfield cannot be blank";
validField = false;
}

// more code to check other field requirements.

return validField;
}


function validateThatField (theField) {
var validField = true;

// code that checks validity.
// set validField to false if any checks fail.
// append field error msg to "master" error message

return validField;
}

function pickedButton (theRadioButtonSet) {
var buttonPicked = false;

for (var i=0; i<theRadioButtonSet.length; i++) {
if (theRadioButtonSet[i].checked == true) {
buttonPicked = true;
break;
}
}

if (!buttonPicked) {
errorMsg += "\nPlease select one of the radio buttons";
}

return buttonPicked;
}

// here's what your opening form tag will look like:
<form name='myFormName'
method = 'post'
onsubmit='return validateForm(myFormName)'>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum