Web Analytics Made Easy -
StatCounter Disabling Checkboxes - CodingForum

Announcement

Collapse
No announcement yet.

Disabling Checkboxes

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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.

    Comment


    • #3
      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.

      Comment


      • #4
        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

        Comment


        • #5
          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.

          Comment


          • #6
            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

            Comment


            • #7
              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);

              Comment


              • #8
                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;
                         [b]break;[/b]
                      }
                   }
                Glenn
                vBulletin Mods That Rock!

                Comment


                • #9
                  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

                  Comment


                  • #10
                    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

                    Comment


                    • #11
                      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!)

                      Comment


                      • #12
                        Try removing the double quotes in your alert.

                        Comment


                        • #13
                          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)'

                          Comment

                          Working...
                          X