www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 32

Thread: radio button interactivities on page load

  1. #1
    Join Date
    Oct 2006
    Posts
    203

    radio button interactivities on page load

    So I made a form with 2 radio buttons. Each buttons have a text field...I made it so when you click on one radio button the other would grayed out:

    This is probably the noob way to do it and I know this can be condensed somehow..:

    Code:
     <script language='javascript'>
    <!-- //
    function setReadOnly(obj)
    {
    if(obj.value == "1")
    {
    document.forms[0].one.style.backgroundColor = "#ffffff";
    document.forms[0].one.readOnly = 0;
    document.forms[0].one.value = "";
    
    } else {
    document.forms[0].one.style.backgroundColor = "#eeeeee";
    document.forms[0].one.readOnly = 1;
    }
    }				
    // -->
    
    <!-- //
    function setReadOnly2(obj)
    {
    if(obj.value == "2")
    {
    document.forms[0].two.style.backgroundColor = "#ffffff";
    document.forms[0].two.readOnly = 0;
    document.forms[0].two.value = "";
    
    } else {
    document.forms[0].two.style.backgroundColor = "#eeeeee";
    document.forms[0].two.readOnly = 1;
    }
    }				
    // -->
    </script>
    and

    Code:
    <input type="radio" name="email" value="1" id="mail" checked onclick="setReadOnly(this), setReadOnly2(this)" />
                     E-mail: <input type="text" class="input" name="one" id="email" /><br />
                  
    <input type="radio" name="ms" value="2" id="mail" onclick="setReadOnly(this), setReadOnly2(this)" />
                     US Mail: <input type="text" class="input" name="two"  id="mail" />
    Anyways this works...But here is where I'm stuck:

    When I load or refresh the page it is defaulted(checked) on the first radio button which is Email...but the JS script won't work until I click on the other so when not interacted they are both writeable.....

    How can I have it defaulted to email and have the mail grayed out at page load or refresh?

    Thanks in advanced.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,036
    ok... let's do first things first. If you call your radios the same name, they will automatically not give you the choice of having both selected. Is that what you want:

    Code:
    <input type="radio" name="email" value="1" id="email" checked="checked" onclick="" />
                     E-mail: <input type="text" class="input" name="one" id="email" /><br />
                  
    <input type="radio" name="email" value="2" id="usmail" onclick="" />
                     US Mail: <input type="text" class="input" name="two"  id="usmail" />
    or is there some other problem?

  3. #3
    Join Date
    Oct 2006
    Posts
    203
    or is there some other problem?
    Well if I change the name then when the js starts kicking it will keep the other button active....

    But honestly what I want is whatever is selected on load/reload I want the other (text field) grayed out automatically.

  4. #4
    Join Date
    Nov 2010
    Posts
    1,036
    but if all you want is that on page load one is selected and the other not, and then when you click on the other the first one gets unselected you don't need any of the javascript. that's what radio buttons are for.

    notice how the onclicks in the code I posted don't actually do anything? paste it into your code and see if that's the effect you want.

    [EDIT] just saw the bit about the text field... how about this:

    Code:
    <input type="radio" name="email" value="1" id="emailrad" checked="checked" onclick="" />
                     E-mail: <input type="text" class="input" name="one" id="emailtxt" /><br />
                  
    <input type="radio" name="email" value="2" id="usmailrad" onclick="setReadOnly()" />
                     US Mail: <input type="text" class="input" disabled="true" name="two"  id="usmailtxt" />
    
    
    <script type="text/javascript">
    <!-- //
    function setReadOnly() {
    document.getElementById("usmailtxt").disabled=false;
    }				
    </script>

  5. #5
    Join Date
    Nov 2010
    Posts
    1,036
    or this... you can flip back and forth all day...

    Code:
    <input type="radio" name="email" value="1" id="emailrad" checked="checked" onclick="setReadOnly(false,true)" />
                     E-mail: <input type="text" class="input" name="one" id="emailtxt" /><br />
                  
    <input type="radio" name="email" value="2" id="usmailrad" onclick="setReadOnly(true,false)" />
                     US Mail: <input type="text" class="input" disabled="true" name="two"  id="usmailtxt" />
    
    
    <script type="text/javascript">
    <!-- //
    function setReadOnly(style1,style2) {
    document.getElementById("usmailtxt").disabled=style2;
    document.getElementById("emailtxt").disabled=style1;
    }				
    </script>

  6. #6
    Join Date
    Oct 2006
    Posts
    203

    Code:
    <input type="radio" name="email" value="1" id="emailrad" checked="checked" onclick="" />
                     E-mail: <input type="text" class="input" name="one" id="emailtxt" /><br />
                  
    <input type="radio" name="email" value="2" id="usmailrad" onclick="setReadOnly()" />
                     US Mail: <input type="text" class="input" disabled="true" name="two"  id="usmailtxt" />
    
    
    <script type="text/javascript">
    <!-- //
    function setReadOnly() {
    document.getElementById("usmailtxt").disabled=false;
    }				
    </script>
    That works perfectly But...

    How do I get the other to work if I do it this way? wouldn't it be if else statement?

    Thanks!

  7. #7
    Join Date
    Nov 2010
    Posts
    1,036


    the other what?

  8. #8
    Join Date
    Oct 2006
    Posts
    203
    This:

    <script type="text/javascript">
    <!-- //
    function setReadOnly() {
    document.getElementById("usmailtxt").disabled=false;
    }
    </script>

    Makes one grayed out on load/refresh but if I click on the other button it still stays gray(usmailtxt)

  9. #9
    Join Date
    Nov 2010
    Posts
    1,036
    wait...

    the way I see it, it loads and:
    email button selected
    email text box active
    US email button unselected
    US email text box disabled

    click the US email button, US email text box becomes active

    refresh the page, it goes back to the way it was before

    what do you want to happen?

  10. #10
    Join Date
    Oct 2006
    Posts
    203
    Quote Originally Posted by xelawho View Post
    wait...

    the way I see it, it loads and:
    email button selected
    email text box active
    US email button unselected
    US email text box disabled

    click the US email button, US email text box becomes active

    refresh the page, it goes back to the way it was before

    what do you want to happen?
    Maybe I have my code wrong but I don't get that...

  11. #11
    Join Date
    Nov 2010
    Posts
    1,036
    possibly. I changed some of your id names to make them unique (it's bad practice to have 2 elements with the same id in javascript)

  12. #12
    Join Date
    Oct 2006
    Posts
    203
    Quote Originally Posted by xelawho View Post
    possibly. I changed some of your id names to make them unique (it's bad practice to have 2 elements with the same id in javascript)
    Can I bother you to show me how you have it coded? The whole code that is.

    TY!

  13. #13
    Join Date
    Nov 2010
    Posts
    1,036
    that's pretty much it, really...

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>blank</title>
        <meta charset="UTF-8">
    </head>
    
    <body>
    <input type="radio" name="email" value="1" id="emailrad" checked="checked" onclick="" />
                     E-mail: <input type="text" class="input" name="one" id="emailtxt" /><br />
                  
    <input type="radio" name="email" value="2" id="usmailrad" onclick="setReadOnly()" />
                     US Mail: <input type="text" class="input" disabled="true" name="two"  id="usmailtxt" />
    
    
    <script type="text/javascript">
    
    function setReadOnly() {
    document.getElementById("usmailtxt").disabled=false;
    }				
    </script>
    
    </body>
    </html>

  14. #14
    Join Date
    Oct 2006
    Posts
    203
    Quote Originally Posted by xelawho View Post
    that's pretty much it, really...

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>blank</title>
        <meta charset="UTF-8">
    </head>
    
    <body>
    <input type="radio" name="email" value="1" id="emailrad" checked="checked" onclick="" />
                     E-mail: <input type="text" class="input" name="one" id="emailtxt" /><br />
                  
    <input type="radio" name="email" value="2" id="usmailrad" onclick="setReadOnly()" />
                     US Mail: <input type="text" class="input" disabled="true" name="two"  id="usmailtxt" />
    
    
    <script type="text/javascript">
    
    function setReadOnly() {
    document.getElementById("usmailtxt").disabled=false;
    }				
    </script>
    
    </body>
    </html>
    Sweet I checked this in FF, but onced I clicked on Us Mail no functionality stops working.

    Basically I want it to go back and forth...the code i have in the beginning goes back and forth...so I click email, I cant type anything on US email.
    I click on US Mail radio I cant type anything on email text field...perfect...but..

    All I wanted is that on reload and refresh to have US mail disable automatically since email is selected..onced i click on us mail radio then email text field is disable...I hope i wasn't confusing.

    Thanks
    Last edited by riskmod; 09-24-2011 at 12:14 PM.

  15. #15
    Join Date
    Nov 2010
    Posts
    1,036
    Quote Originally Posted by riskmod View Post
    Basically I want it to go back and forth...the code i have in the beginning goes back and forth...so I click email, I cant type anything on US email.
    I click on US Mail radio I cant type anything on email text field...
    have you tried the code I posted in #5? - I think that might be what you're talking about...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles