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 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Radio button to enable otherwise locked section

    I'm having trouble programming a radio button to enable a group of checkbox options. I want the group to be disabled unless the radio is selected.

    Can I use:
    Code:
    document.getElementById("").disabled=true/false
    for a <div> section?

    Here's what I have so far.
    function:
    Code:
    function disableSection() {
    	if (document.forms.radio.checked)
    		document.getElementById("optionalinfo").disabled = false;
    	else
    		document.getELementById("optionalinfo").disabled = true;
    		}
    HTML:
    Code:
    <input type="radio" name="additionalinfo" value="yes"/>Yes! Please sign me up for the following items:<br/>
    					<div><blockquote><input id="optionalinfo" type="checkbox" name="additional" value="newsletter"/> I wish to receive <font color="ff69b4"><i>AMT</i></font>'s monthly E-Zine, <b>"Glorious Morning Muffins"</b>.</br>
    					<input id="optionalinfo" type="checkbox" name="additional" value="Updates"/> I wish to receive <font color="ff69b4"><i>AMT</i></font> updates.</br>
    					<input id="optionalinfo" type="checkbox" name="additional" value="future"/> Keep me posted about future offerings at <font color="ff69b4"><i>AMT</i></font>.<br/>
    					<input id="optionalinfo" type="checkbox" name="additional" value="userRegister"/>I need to register to log in</blockquote></div>
    In addition to this, I would like the section to fade when disabled. Thanks for any help... again!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    For starters, it's illegal to use the same ID for more than one tag.

    In any case, you don't care. You need/want to use the checkbox *NAME(S)*.
    Code:
    <input type="radio" name="additionalinfo" value="yes" onclick="enableSection(this.form.additional);"/>
         Yes! Please sign me up for the following items:<br/>
    <input  type="checkbox" disabled name="additional" value="newsletter"/> ...
    <input  type="checkbox" disabled name="additional" value="Updates"/> ...
    etc. ...
    and then:
    Code:
    function enableSelection(cbs)
    {
        for ( var c = 0; c < cbs.length; ++c )
        {
            cbs[c].disabled = false;
        }
    }
    With only one radio button, there is no way to un-check it, so if the person clicks on it, the change of disabled to false in the checkboxes is one-way.

    Notice that passing this.form.additional to the function passes the *array* of checkboxes, automatically.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Regarding fading when disabled: ???? But it *MUST* start up disabled! No choice, if using a radio button to enable. You mean fade in when enabled?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Regarding fading when disabled: ???? But it *MUST* start up disabled! No choice, if using a radio button to enable. You mean fade in when enabled?
    Yes. That's what I meant. I would like the section to fade in when it is enabled. However, my bigger concern at this moment is that while your earlier code was successful at disabling the section upon loading, the section is not enabled when the radio is selected. I entered it in exact, and I can't see why.

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Also, the enabling radio button is a "yes" option. But, I do also have a radio button that is a "no" option, that would reverse the previous, or at least leave the section disabled.

    Here's the code again:
    Code:
    <input type="radio" name="additionalinfo" value="yes" onclick="enableSection(this.form.additional);"/>Yes! Please sign me up for the following items:<br/>
    <blockquote>
    
    <input type="checkbox" disabled name="additional" value="newsletter"/> I wish to receive <font color="ff69b4"><i><b>AMT</b></i></font>'s monthly E-Zine, <b>"Glorious Morning <br/>
    
    <input type="checkbox" disabled name="additional" value="Updates"/> I wish to receive <font color="ff69b4"><i><b>AMT</b></i></font> updates.<br/>
    
    <input type="checkbox" disabled name="additional" value="future"/> Keep me posted about future offerings at <font color="ff69b4"><i><b>AMT</b></i></font>.<br/>
    
    <input type="checkbox" disabled name="additional" value="userRegister" onclick="showUserReg()"/> Register me for my own <font color="ff69b4"><i><b>AMT</b></i></font> <b>username</b> and <b>password</b>.<br/	</span></blockquote>
    
    <input type="radio" name="additionalinfo" value="no"/>No thank you. I would not like to receive additional resources from <font color="ff69b4"><i><b>AMT</b></i></font> at this time.
    And the function:

    Code:
    function enableSelection(cbs)
    {
        for ( var c = 0; c < cbs.length; ++c )
        {
            cbs[c].disabled = false;
        }
    }
    Anyway, I really appreciate you helping me with this. I'm learning so much.

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    You had a few typo errors, a spurious </span> tag and a missing <form> tag.

    I added a bit of logic to reset the selections if the user changes their mind.

    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function enableSection(cbs, flag) {
      for ( var c=0; c<cbs.length; ++c ) {
        cbs[c].disabled = flag;
        if (flag) { cbs[c].checked = !flag; }
      }
    }
    </script>
    
    </head>
    <body>
    <form>
    <input type="radio" name="additionalinfo" value="yes" onclick="enableSection(this.form.additional,false);"/>
    Yes! Please sign me up for the following items:<br/>
    
    <blockquote>
     <input type="checkbox" disabled name="additional" value="newsletter"/>
     I wish to receive
     <font color="ff69b4"> <i><b>AMT</b></i></font>'s monthly E-Zine, <b>"Glorious Morning <br/>
    
     <input type="checkbox" disabled name="additional" value="Updates"/>
     I wish to receive
     <font color="ff69b4"><i><b>AMT</b></i></font> updates.<br/>
    
     <input type="checkbox" disabled name="additional" value="future"/>
     Keep me posted about future offerings at
     <font color="ff69b4"><i><b>AMT</b></i></font>.<br/>
    
     <input type="checkbox" disabled name="additional" value="userRegister" onclick="showUserReg()"/>
     Register me for my own
     <font color="ff69b4"><i><b>AMT</b></i></font>
     <b>username</b> and <b>password</b>.<br />
    </blockquote>
    
    <input type="radio" name="additionalinfo" value="no"  onclick="enableSection(this.form.additional,true);"/>
    No thank you. I would not like to receive additional resources from
    <font color="ff69b4"><i><b>AMT</b></i></font> at this time.
    
    </form>
    </body>
    </html>
    Good Luck!


    PS: You are also missing the "ShowUserReg()" function definition.
    Last edited by jmrker; 09-01-2011 at 11:53 PM.

  • Users who have thanked jmrker for this post:

    magikeys (09-02-2011)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Hey, I thought <font> was deprecated!

    And we still haven't shown him fadein/fadeout.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Arrow

    Quote Originally Posted by Old Pedant View Post
    Hey, I thought <font> was deprecated!

    And we still haven't shown him fadein/fadeout.
    So did I, but I can't fix all the mistakes in the world!

    Sorry, I guess I read the thread too fast and missed the fadein/out request.

    But at least he/she has some working code to start modifications from,
    which is more than they had before!

  • #9
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you so very much everyone. As I've said before, I'm brand new at this stuff in that I've only just begun teaching myself, with your assistance, for the past couple of weeks. And, while I've managed to blow through HTML and CSS quickly, I've found javascript challenging.

    So, thank you again for your willingness to help me. I'm trying to break your codes down to their basic parts in order to learn how they work, and then trying to get a handle on the logic. It's coming along, but slowly.

    Anyway, I appreciate it all. I'll be back.

    Oh, and thanks for the heads up on the deprecation of <font>. I guess I need to pay a little more attention to W3C stuff. Oops! I've switched it all over to css now.

  • #10
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Extra thanks to jmrker. Your code was spot on. Awesome! Thank you, thank you, thank you.

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Thumbs up

    Quote Originally Posted by magikeys View Post
    Extra thanks to jmrker. Your code was spot on. Awesome! Thank you, thank you, thank you.
    You're most welcome, I'm sure, from both of us.
    We're both happy to help.

    I tend to follow 'Old Pedant's posts as I usually learn something from his insights.

    Good Luck!


  •  

    Posting Permissions

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