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 6 of 6

Thread: toggle issue

  1. #1
    New Coder
    Join Date
    Jun 2008
    Location
    UK
    Posts
    53
    Thanks
    12
    Thanked 0 Times in 0 Posts

    toggle issue

    Hi

    Im using the following script to toggle a div in a form

    Code:
    function toggleMe2(obj, a){
      var e=document.getElementById(a);
      if(!e)return true;
        e.style.display="inline"
      return true;
    }
    
    function toggleMe(obj, a){
      var e=document.getElementById(a);
      if(!e)return true;
        e.style.display="none"
      return true;
    }
    and the form code:

    Code:
     <p>New title:
        <select name="new_title">
          <option value="" selected="selected">Select your new title</option>
    	  <option value="Mr" onclick="return toggleMe(this, 'othernewtitle')">Mr</option>
          <option value="Mrs" onclick="return toggleMe(this, 'othernewtitle')">Mrs</option>
          <option value="Miss" onclick="return toggleMe(this, 'othernewtitle')">Miss</option>
          <option value="Ms" onclick="return toggleMe(this, 'othernewtitle')">Ms</option>
          <option value="Dr." onclick="return toggleMe2(this, 'othernewtitle')">Dr.</option>
          <option value="Rev." onclick="return toggleMe(this, 'othernewtitle')">Rev.</option>
          <option value="Prof." onclick="return toggleMe(this, 'othernewtitle')">Prof.</option>
    	 
        </select> 
    	<div id="othernewtitle" style="display: none;">
    	 doctor / dentists ref<input name="gmcgdcno" type="text" />
    	 </div>
    I need to add another form element, 'Other'. I need to have another div toggled on when it is clicked, and toggled off when anything else is clicked. I tried having 2 onclick commands, but that didnt work (i didnt think it would - but gave it a shot anyway). Anyone know how to get this to work?

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,128
    Thanks
    38
    Thanked 504 Times in 498 Posts
    'onClick' events do not work in the <option> portion of the select.
    Move it to the <select> section.

    Perhaps try:
    <select name="new_title" onclick="toggleMe(this.'othernewtitle')>

    Question: Why are you passing the 'this' when it is not used in the function?

    Note: Not tested.

  • #3
    New Coder
    Join Date
    Jun 2008
    Location
    UK
    Posts
    53
    Thanks
    12
    Thanked 0 Times in 0 Posts
    damn - i had only ever used this in ffox (where it does work) - now i see in MSIE it doesn't - Lame
    Last edited by Jordan656; 04-05-2009 at 08:44 PM.

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by Jordan656 View Post
    damn - i had only ever used this in ffox (where it does work) - now i see in MSIE it doesn't - Lame
    OK, I've done my best to interpret what you want. I'm sorry if it's not what you're looking for.

    It seems you want Other to be an option and have it go away like Dr option does.

    Code:
    Removed bad code
    Last edited by TinyScript; 04-05-2009 at 09:39 PM.

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Aha ha.. Internet Explorer had me scrambling!!
    here you go.
    Code:
    <script>
    function sort(tester)
    {
    if(tester=="Dr."){toggleMe2(tester, 'othernewtitle')}
    if(tester=="Other"){toggleMe3(tester, 'othernewtitle')}
    if(tester!="Other" && tester!="Dr."){toggleMe(tester, 'othernewtitle')}
    }
    
    function toggleMe2(obj, a){
      var e=document.getElementById(a);
      if(!e)return true;
    e.innerHTML="doctor / dentists ref<input name='gmcgdcno' type='text' >";
        e.style.display="inline"
    
      return true;
    }
    
    function toggleMe(obj, a){
      var e=document.getElementById(a);
      if(!e)return true;
        e.style.display="none"
      return true;
    }
    
    function toggleMe3(obj, a){
      var e=document.getElementById(a);
      if(!e)return true;
    e.innerHTML="Other<input name='gmcgdcno' type='text' >";
        e.style.display="inline"
      return true;
    }
    </script>
    
    <p>New title:
        <select name="new_title" onclick="sort(this.value)">
          <option value="" selected="selected">Select your new title</option>
    	  <option value="Mr" >Mr</option>
          <option value="Mrs" >Mrs</option>
          <option value="Miss" >Miss</option>
    
          <option value="Ms" >Ms</option>
          <option value="Dr." >Dr.</option>
          <option value="Rev." >Rev.</option>
          <option value="Prof." >Prof.</option>
    <option value="Other" >Other</option>
    	 
        </select> 
    	<div id="othernewtitle" style="display: none;">
    
    	 
    	 </div>

  • #6
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    here's a better version with it all in one function
    Code:
    <script>
    function sort(tester)
    {
    if(tester=="Dr."){toggleMe(tester, 'othernewtitle','doctor / dentists ref<input name="gmcgdcno" type="text" >')}
    if(tester=="Other"){toggleMe(tester, 'othernewtitle','Other<input name="gmcgdcno" type="text" >')}
    if(tester!="Other" && tester!="Dr."){toggleMe(tester, 'othernewtitle','')}
    }
    
    function toggleMe(obj, a, txt){
      var e=document.getElementById(a);
      if(!e)return true;
    e.innerHTML=txt;
        e.style.display="inline"
    
      return true;
    }
    
    </script>
    
    <p>New title:
        <select name="new_title" onclick="sort(this.value)">
          <option value="" selected="selected">Select your new title</option>
    	  <option value="Mr" >Mr</option>
          <option value="Mrs" >Mrs</option>
          <option value="Miss" >Miss</option>
          <option value="Ms" >Ms</option>
          <option value="Dr." >Dr.</option>
          <option value="Rev." >Rev.</option>
          <option value="Prof." >Prof.</option>
    <option value="Other" >Other</option>
    	 
        </select> 
    	<div id="othernewtitle" style="display: none;">
    	 
    	 </div>


  •  

    Posting Permissions

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