Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Disabling Checkboxes

    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?

  • #2
    Regular Coder
    Join Date
    Apr 2003
    Location
    Atlanta, GA
    Posts
    487
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sure, something like this:
    Code:
    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);

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You can do a for loop exit once a checked item is detected.
    Code:
       for (var i=0; i<theRadioButtonSet.length; i++) {
          if (theRadioButtonSet[i].checked == true) {
             buttonPicked = true;
             break;
          }
       }
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

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

    PHP 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=0i<theRadioButtonSet.lengthi++) {
          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> 

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I changed the:

    PHP Code:
    // call the function from somewhere
    pickedButton(frmSurvey.Q2); 
    to:

    PHP Code:
    // 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:

    PHP Code:
    function pickedButton (theRadioButtonSet) {
       var 
    buttonPicked false;

       for (var 
    i=0i<theRadioButtonSet.lengthi++) {
          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!)

  • #12
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try removing the double quotes in your alert.

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    PHP Code:
    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=0i<theRadioButtonSet.lengthi++) {
          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)'


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •