Web Analytics Made Easy -
StatCounter toggle issue - CodingForum

Announcement

Collapse
No announcement yet.

toggle issue

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    '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.

    Comment


    • #3
      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; Apr 5, 2009, 02:44 PM.

      Comment


      • #4
        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; Apr 5, 2009, 03:39 PM.

        Comment


        • #5
          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>

          Comment


          • #6
            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>

            Comment

            Working...
            X