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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    using radio button to trigger show/hide div

    hi, im trying to get this to work, but i suck at javascript.

    any help would be appreciated.

    Im trying to get a radio button's checked state to trigger the showing or hiding of a div. if the email button is checked the div is hidded, if phone is selected, the div is visible

    thanks


    javascript:
    Code:
    function getRef(id) {
    		return (document.getElementById ? document.getElementById(id) : document.all[id]);
    }
    
    function showElements() {
    			 if (document.getElementById) {
    					 var toHidePhone = getRef('preferredPhone').value
    					
    			}
    html:
    Code:
    <li><span class="formLeftColReq"><strong>Preferred contact method</strong></span>	
                    <input type="radio" id="preferredPhone" name="preferred" value="phone"> Phone
                    <input type="radio" id="preferredEmail" name="preferred" value="email" checked="checked"> Email</li>
                    
                    <li><span class="formLeftColReq"><strong>Email</strong></span>
                    <input type="text" name="email" id="email"></li>
              <div id="hidePhone">      
                    <li><span class="formLeftColReq">Phone Number</span>
                    <input type="text" name="phone" id="phone"></li>
                    
                    <li><span class="formLeftCol">Alternate Number</span>
                    <input type="text" name="altPhone" id="altPhone"></li>
                    
                    <li><span class="formLeftCol">Best Days and Times Are:</span>
                    
                    <select name="selectTime" id="days">
                        <option selected="selected">-Select a Time-</option>
                        <option value="9am">9am - 10am</option>
                        <option value="10am">10am - 11am</option>
                        <option value="11am">11am - 12pm</option>
                        <option value="12pm">12pm - 1pm</option>
                        <option value="1pm">1pm - 2pm</option>
                        <option value="2pm">2pm - 3pm</option>
                        <option value="3pm">3pm - 4pm</option>
                        <option value="4pm">4pm - 5pm</option>
                        <option value="5pm">5pm - 6pm</option>
                        <option value="6pm">6pm - 7pm</option>
                        <option value="7pm">7pm - 8pm</option>
                        <option value="8pm">8pm - 9pm</option>
                    </select></li>
                    <li>
                    <span class="formSmCol"><input type="checkbox" id="any" name="days" value="any"> Any</span>
                    <span class="formSmCol"><input type="checkbox" id="monday" name="days" value="monday"> Monday</span>
                    <span class="formSmCol"><input type="checkbox" id="tuesday" name="days" value="tuesday"> Tuesday</span>
                    <span class="formSmCol"><input type="checkbox" id="wednesday" name="days" value="wednesday"> Wednesday</span>
                    </li><li>
                    <span class="formSmCol"><input type="checkbox" id="thursday" name="days" value="thurday"> Thursday</span>
                    <span class="formSmCol"><input type="checkbox" id="friday" name="days" value="friday"> Friday</span>
                    <span class="formSmCol"><input type="checkbox" id="saturday" name="days" value="saturday"> Saturday</span>
                    <span class="formSmCol"><input type="checkbox" id="sunday" name="days" value="sunday"> Sunday</span></li>
              </div>
    CSS:
    Code:
    #hidePhone {visibility:hidden; display:none;}

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    Code:
    <script type="text/javascript">
    if (!document.getElementById)
    {
      if (document.all)
      {
        document.getElementById = function(p_id) { return document.all[p_id]; };
      }
    }
    
    function hideElement(p_id)
    {
      if (document.getElementById(p_id).className != "hideElement")
      {
        document.getElementById(p_id).className = "hideElement";
      }
    }
    
    function showElement(p_id)
    {
      if (document.getElementById(p_id).className != "showElement")
      {
        document.getElementById(p_id).className = "showElement";
      }
    }
    
    </script>
    
    <style type="text/css">
    .showElement { display: default;}
    .hideElement { display: none;}
    </style>
    
    <html>
      <head>
        <title></title>
      </head>
      <body>
         <input type="radio" name="preferred" value="email" onclick="hideElement('phoneDiv');" /> Email<br />
         <input type="radio" name="preferred" value="Phone" onclick="showElement('phoneDiv');" /> Phone<br />
      </body>
    </html>

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    awesome, you rock, thanks sooo much for your help.

    just one small question...how can i make it so that it defaults with email checked & the div hidden, but keeping the current functionality?

    thanks

  • #4
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    <input type="radio" checked="checked" />

    <div class="hideElement">

  • #5
    New Coder
    Join Date
    Jul 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i must be a moron, i tried that and it didnt work, oh well, it works now thats all that matters

    thanks again for your help.

  • #6
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    If you tried it and it didn't work, the most common causes would be viewing a cached copy (clear your cache then reload, in mozilla use shift+reload), a typo, or forgetting to transfer the file to the server if developing remotely.

    Glad it's working

  • #7
    New Coder
    Join Date
    Jul 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok, one more question and hopefully that will be it (fingers crossed)

    how would i modify this line:

    <input type="radio" name="preferred" value="Phone" onclick="showElement('phoneDiv');" /> Phone

    so it would change multiple id's at once, or is it even possible? or do we have to change the main js as well?

    thanks again for your help

  • #8
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    If you look at the code, it is clear that the function you are calling to show and hide the phoneDiv takes one argument and only applies the class to the one element specified by the argument.

    You could re-write the show/hide element function to take any number of arguments, or you could keep a list of divs that participate in this scheme in the main JS. Then, when you show 1, it hides the other visible ones. You gotta let us know what you want to do though.

    To answer your question simply, you can pass in as many arguments to the function as you want, then change the function to this:

    Code:
    function showElement()
    {
      for (var argIndex in arguments)
      {
        if (document.getElementById(arguments[argIndex]).className != "showElement")
        {
          document.getElementById(arguments[argIndex]).className = "showElement";
        }
      }
    }

  • #9
    New Coder
    Join Date
    Jul 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I realized that I have to apply the show/hide to 5 items. They will all either be hidden or showing.

    ids are hidePhone1, hidePhone2, hidePhone3, hidePhone4, hidePhone5

    and are all triggered by the one change of radio button state.

    would the function above work then, and then what do i have to change this to?
    Code:
    <input type="radio" name="preferred" value="email" onclick="hideElement('hidePhone1');" /> Email<br />
         <input type="radio" name="preferred" value="Phone" onclick="showElement('hidePhone1');" /> Phone<br />

  • #10
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    the function I posted will allow you to:

    onclick="hideElement('ele1','ele2','ele3','ele4',.....

    as many as you want.

    All you have to do is do the same thing for the showElement function and you can do the same for the onclick=showElement('1','2','3',....

  • #11
    New Coder
    Join Date
    Jul 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i'm assuming there is something wrong in the javascript, with the naming, but I cant seem to make it work

    javascript
    Code:
    if (!document.getElementById)
    {
      if (document.all)
      {
        document.getElementById = function(p_id) { return document.all[p_id]; };
      }
    }
    
    
    function hideElement()
    {
      for (var argIndex in arguments)
      {
        if (document.getElementById(arguments[argIndex]).className != "hideElement")
        {
          document.getElementById(arguments[argIndex]).className = "hideElement";
        }
      }
    }
    
    function showElement()
    {
      for (var argIndex in arguments)
      {
        if (document.getElementById(arguments[argIndex]).className != "showElement")
        {
          document.getElementById(arguments[argIndex]).className = "showElement";
        }
      }
    }
    html:
    Code:
    <input type="radio" name="preferred" value="email" onclick="hideElement('hidePhone1','hidePhone2','hidePhone3','hidePhone4','hidePhone5');" checked="checked" /> Email
                    <input type="radio" name="preferred" value="phone" onclick="showElement('hidePhone1','hidePhone2','hidePhone3','hidePhone4','hidePhone5');" /> Phone

  • #12
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    you're most likely getting errors, that could be cause by not having elements with ids that match the ones you are using.

    Try looking at your error messages and pasting them here.

  • #13
    New Coder
    Join Date
    Jul 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thats the problem, im not getting errors at all, and nothing is working. i dont know what is wrong, i know the stuff in the java script file doesnt match up, i just can't seem to make anything work

  • #14
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    maybe it's my fault for using for-in

    try this:
    Code:
    function hideElement()
    {
      for (var i = arguments.length - i; i >= 0; --i)
      {
        if (document.getElementById(arguments[i]).className != "hideElement")
        {
          document.getElementById(arguments[i]).className = "hideElement";
        }
      }
    }

  • #15
    New Coder
    Join Date
    Jul 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nope still nothing, and i greatly appreciate your help

    heres my javascript code again:
    Code:
    if (!document.getElementById)
    {
      if (document.all)
      {
        document.getElementById = function(p_id) { return document.all[p_id]; };
      }
    }
    
    
    function hideElement()
    {
      for (var i = arguments.length - i; i >= 0; --i)
      {
        if (document.getElementById(arguments[i]).className != "hideElement")
        {
          document.getElementById(arguments[i]).className = "hideElement";
        }
      }
    }
    
    function showElement()
    {
      for (var i = arguments.length - i; i >= 0; --i)
      {
        if (document.getElementById(arguments[i]).className != "showElement")
        {
          document.getElementById(arguments[i]).className = "showElement";
        }
      }
    }
    html:
    Code:
    <span class="formLeftColReq"><strong>Preferred contact method</strong></span>
                    <input type="radio" name="preferred" value="email" onclick="hideElement('hidePhone1','hidePhone2','hidePhone3','hidePhone4','hidePhone5');" checked="checked"> Email
                    <input type="radio" name="preferred" value="phone" onclick="showElement('hidePhone1','hidePhone2','hidePhone3','hidePhone4','hidePhone5');"> Phone
                    
                    
                    
    
                    <div id="hidePhone1" class="hideElement">
                    <span class="formLeftColReq"><strong>Phone Number</strong></span>
                    <input type="text" name="phone" id="phone">
                    </div>


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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