toggle issue

Jordan656 · 04-05-2009, 07:24 PM

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?

jmrker · 04-05-2009, 07:34 PM

'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.

Jordan656 · 04-05-2009, 07:38 PM

damn - i had only ever used this in ffox (where it does work) - now i see in MSIE it doesn't - Lame

TinyScript · 04-05-2009, 08:15 PM

Quote:

Originally Posted by Jordan656

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

TinyScript · 04-05-2009, 08:35 PM

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>

TinyScript · 04-05-2009, 10:02 PM

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>