Javascript Function Not Working

Pope Pius X2 · Share | #1 (**permalink**) 12-17-2008, 07:12 AM

I have a Javascript function to display a different <form> each time a drop down box is clicked. All forms are set to display: none but when one of the options in the drop down box is clicked, one appears. If another is clicked, the current one appearing disappears and the new one appears. It works fine in Firefox but not in Internet Explorer 6 or 7 and I don't know why. My code is as follows:

Code:

function showm(ob,ob2,ob3) {
	
    document.getElementById(ob).style.display = 'block'
    document.getElementById(ob2).style.display = 'none'
    document.getElementById(ob3).style.display = 'none'
}

HTML Code:

<form id="form1" name="form1" method="post" action="">
  <select name="changer" id="changer">
  	<option value="" selected="selected">Please select your delivery area</option>
    <option value="SWD S09 UK" onclick="showm('swd_s09_uk','swd_s09_eu','swd_s09_rw')">United Kingdom</option>
    <option value="SWD S09 EU" onclick="showm('swd_s09_eu','swd_s09_uk','swd_s09_rw')">Europe</option>
    <option value="SWD S09 RW" onclick="showm('swd_s09_rw','swd_s09_uk','swd_s09_eu')">Rest of World</option>
  </select>
</form>


<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="swd_s09_uk" style="display:none;">
Paypal button
</form>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="swd_s09_eu" style="display:none;">
Paypal button
</form>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="swd_s09_rw" style="display:none;">
Paypal button
</form>

kos · #2 (**permalink**) 12-17-2008, 07:51 AM

tested in both IE7 & FF 3 (I don't have IE6 but I find no reason why it shouldn't work in it too)

Code:

<body>

<form id="form1" name="form1" method="post" action="">
	<select name="changer" id="changer" onchange="handleOnChange(this, 'swd_s09_uk','swd_s09_eu','swd_s09_rw');">
		<option value="" selected="selected">Please select your delivery area</option>
		<option id="uk" value="SWD S09 UK">United Kingdom</option>
		<option id="eu" value="SWD S09 EU">Europe</option>
		<option id="rw" value="SWD S09 RW">Rest of World</option>
	</select>
</form>

	<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="swd_s09_uk" style="display:none;"> Paypal button </form> <!-- * UK -->
	<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="swd_s09_eu" style="display:none;"> Paypal button </form> <!-- * EU -->
	<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="swd_s09_rw" style="display:none;"> Paypal button </form> <!-- * RW -->

<script type="text/javascript">

function showm() {
	document.getElementById(arguments[0]).style.display = 'block';
	document.getElementById(arguments[1]).style.display = document.getElementById(arguments[2]).style.display = 'none';
}

function handleOnChange(selectCtl,ob,ob2,ob3)
{
	var index = selectCtl.options[selectCtl.selectedIndex];

	if (index.getAttribute('id') == 'uk')
	{
		return showm(ob,ob2,ob3);
	}
	else if (index.getAttribute('id') == 'eu')
	{
		return showm(ob2,ob,ob3);
	}
	else if (index.getAttribute('id') == 'rw')
	{
		return showm(ob3,ob2,ob);
	}
	else { return null; }
}

</script>
</body>

I've changed your code a little bit.

leonid · #3 (**permalink**) 12-18-2008, 09:51 AM

I suspect that your code doesn't work in IE because it doesn't fire onclick from option

try to add this: option value="SWD S09 UK" onclick="alert(this); show......

and see what happens.

leonid · #4 (**permalink**) 12-18-2008, 10:05 AM

Here is my version (works in IE7 and FF3).
I used prototype.js library, so it is compact and low maintanance.

Code:

    <script type="text/javascript" src="../javascript/prototype.js"></script>
    <script type="text/javascript">
       function showm(select){
         var keep = $A(select.options)[select.selectedIndex]; 
         var fArr =   $$("form.pp");
         fArr.each(
              function(el){
                el.style.display = 'none';
              } 
         );
         ($('swd_s09_'+keep.id)).style.display='block';
       }//end showm
    </script>
  </head>
  <body> 
  <form id="form1" name="form1" method="post" action="">
  <select name="changer" id="changer" onchange="showm(this);" >
  	<option value="" selected="selected">Please select your delivery area</option>
    <option id="uk" value="SWD S09 UK">United Kingdom</option>
    <option id="eu" value="SWD S09 EU">Europe</option>
    <option id="rw" value="SWD S09 RW">Rest of World</option>
  </select>
</form>


<form class="pp" action="https://www.paypal.com/cgi-bin/webscr" method="post" id="swd_s09_uk" style="display:none;">
Paypal button UK
</form>
<form class="pp" action="https://www.paypal.com/cgi-bin/webscr" method="post" id="swd_s09_eu" style="display:none;">
Paypal button EU
</form>
<form class="pp" action="https://www.paypal.com/cgi-bin/webscr" method="post" id="swd_s09_rw" style="display:none;">
Paypal button RW
</form

kos · #5 (**permalink**) 12-19-2008, 04:10 AM

^^ you'd load a full library for something trivial like this?? wow..

leonid · #6 (**permalink**) 12-19-2008, 10:55 AM

When a user interacts with a web site and a javascript library (e.g. prototype.js) is mentioned on multiple pages, it'll be loaded only once.

prototype.js is a very useful library and greatly simplifies your code.

BTW, if I want now to add more options (for example, I can divide "The rest of the world" into "Asia", "North America", etc), I don't have to recode -- only HTML needs to
change.