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 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Enable/Disable Form fields (but how to loop it?)

    G'day.

    Well, I have a nice problem for some javascript experts to take a look at.

    Here's the webpage: http://www.orient-explorer.com/ICPLMwebsite/Rbook.asp


    Now, near the bottom of the page under the "Registration Information" section, you can see that there are two options.

    1. The drop down menu's for Option 1 are disabled. The checkboxes for Option 2 are also disabled.

    2. When you select the Option 1 radio button, the Option 1 drop down menu's will enable (and also disable Option 2's checkboxes).

    3. When you select Option 2's radio button, the Option 2's checkboxes will enable and disable Option 1's drop down menu.

    This is how it needs to go, round and round and round in circles

    The problem is, if you were to do the above. (Select Option 1, then Select Option 2, then go back and Select Option 1 again) you will find that the disabling and enabling stop working.

    So... I'm going to ask nicely.. WHY.... and what should I do to make this work?

    I am certain the code I am using is no good. If someone could just post me some proper code for this, I would be really thankful!


    Dan

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You should name the radio buttons the same so that you don't have to code for unchecking the other option when another is clicked.
    That's what radio button is for, you can only select one item at a time.
    Use <label> tag also for the radio button and checkbox labels so that clicking it will check its associated control. Use label tag also for other controls and discover how it behaves for different controls when the label is clicked. Just take note that you need to specify the associated id of the element in the for attribute.
    Here's the code:
    Code:
    function disableEntries(oRad){
      var oFrm = oRad.form;
    
      //get the disabled state based on the value of the checked radio button
      var state = (oRad.value=="1") ? false : true;
      
      //option 1 fields
      oFrm.con_workshop.disabled = state;
      oFrm.reg_name.disabled = state;
     
      //option 2 fields
      oFrm.day_sel.disabled = !state;
      oFrm.day_sel2.disabled = !state;
      oFrm.day_sel3.disabled = !state;	  
    }
    ...
    
    <label for="opt1">OPTION 1</label><input type="radio" name="MyRadioButton" id="opt1" onclick="disableEntries(this);" value="1">
      ...fields for option 1
    
    <label for="opt2">OPTION 2</label><input type="radio" name="MyRadioButton" id="opt2" onclick="disableEntries(this);" value="2">
      ...fields for option 2

  • #3
    New Coder
    Join Date
    Apr 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help. I have to have different names because the information comes from a Database and the values have to be added seperately.


    I think I have figured out a way to do this though.

    <script>
    function SetState(obj_checkbox, obj_select)
    { if(obj_checkbox.checked)
    { obj_select.disabled = false;
    }
    else
    { obj_select.disabled = true;
    }
    }
    </script>



    <input type="checkbox" onclick="SetState(this, this.form.reg_name);SetState(this, this.form.con_workshop)">

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I was talking about the 2 radio buttons for Option 1 and Option 2 and not the checkboxes. Have you tried my suggestion?

    BTW, I also notice you have 2 disableEntries() functions. You can't have 2 functions with the same name.

  • #5
    New Coder
    Join Date
    Apr 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks man, you're a life saver!

    About 3 hours ago, I kept saying to myself "I think its that "id" thing, its gotta be that "id"!" I just didn't know how to use it

    But now I do, thanks for your help!

    A big stamp on your hand!!

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You're welcome!

    There are better ways to present a user-friendly form especially for large forms. Aside from <label> tags, look into <fieldset> and <legend> tags.

    http://www.htmlhelp.com/reference/ht.../fieldset.html
    http://www.quirksmode.org/oddsandends/fieldset.html

  • #7
    New Coder
    Join Date
    Apr 2005
    Posts
    45
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks! I will look it over.


    When I grow up I want to be like you! (You're probably younger than me)


  •  

    Posting Permissions

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