Thread: Javascript Function Not Working In IE

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="paypal" method="post" id="swd_s09_uk" style="display:none;">
Paypal button
</form>

<form action="paypal" method="post" id="swd_s09_eu" style="display:none;">
Paypal button
</form>

<form action="paypal" method="post" id="swd_s09_rw" style="display:none;">
Paypal button
</form>

This code has been tested with IE7 and FF. To keep it cleaner I placed the relevant forms in an array instead of sending them to the function...

Code:

<script language="javascript" type="text/javascript">
var forms_paypal = new Array();
forms_paypal[0] = "swd_s09_uk";
forms_paypal[1] = "swd_s09_eu";
forms_paypal[2] = "swd_s09_rw";

function showm(ob) {
    for (i=0;i<forms_paypal.length;i++) {
        if (forms_paypal[i] == ob) {
            document.getElementById(forms_paypal[i]).style.display = 'block';
        } else {
            document.getElementById(forms_paypal[i]).style.display = 'none';    
        }    
    }
}
</script>

HTML Code:

<form id="form1" name="form1" method="post" action="" onsubmit="return false;">
  <select name="changer" id="changer" onChange="showm(changer.options[changer.selectedIndex].value);">
  	<option value="" selected="selected">Please select your delivery area</option>
    <option value="swd_s09_uk">United Kingdom</option>
    <option value="swd_s09_eu">Europe</option>
    <option value="swd_s09_rw">Rest of World</option>
  </select>
</form>


<form action="paypal" method="post" id="swd_s09_uk" style="display:none;">
Paypal button 1
</form>

<form action="paypal" method="post" id="swd_s09_eu" style="display:none;">
Paypal button 2
</form>

<form action="paypal" method="post" id="swd_s09_rw" style="display:none;">
Paypal button 3
</form>

Hope this is what you're looking for.

Thanks very much for this. I think it's pretty much what I intended but when you say "make it more clean", what do you mean? I deliberately had the objects being sent to the function so as to make it reusable for other forms. Is this considered bad?

Having the objects being sent to the function is not a bad approach, and as a usability approach is the way to go. But because the <option> element doesn't support the onClick event in IE I had to use onChange event of select element to grab the currently selected item.

So by "make it more clean" what I should of said was, because I had the restriction of browser compatibility I couldn't send the id's using the onChange event.

The code I posted was a quick reply to what you asked for :-) If you need the re-usability for the function you could have a function that reads the form to be processed to find the id's and then turn on or off based on selected item. This would mean that it could be used with out the form array.

But at that point you get into the problem of having to process the forms for each and every time this select form is clicked. This might be acceptable for your needs and I'll give you the code I'm thinking about to show you what I'm thinking.

The short of it was I coded it like I did because it has less page DOM hits and if this was a huge page with lots of forms with hundreds of options you might need to worry about this, as it could possibly slow processing, so I always code with this in mind. I didn't know re-usability was an issue or I would of accounted of that in my post :-)

Below find a revised, re-usability approached, function...

Code:

<script language="javascript" type="text/javascript">
function showm(ob,ob1) {    
    for (i=0;i<ob.length;i++) {
        if (ob[i].value == "") {
        } else if (ob[i].value == ob1) {
            document.getElementById(ob[i].value).style.display = 'block';
        } else {
            document.getElementById(ob[i].value).style.display = 'none';    
        }    
    }
}
</script>

HTML Code:

<form id="form1" name="form1" method="post" action="" onsubmit="return false;">
  <select name="changer" id="changer" onChange="showm(changer.options,changer.options[changer.selectedIndex].value);">
  	<option value="" selected="selected">Please select your delivery area</option>
    <option value="swd_s09_uk">United Kingdom</option>
    <option value="swd_s09_eu">Europe</option>
    <option value="swd_s09_rw">Rest of World</option>
  </select>
</form>


<form action="paypal" method="post" id="swd_s09_uk" style="display:none;">
Paypal button 1
</form>

<form action="paypal" method="post" id="swd_s09_eu" style="display:none;">
Paypal button 2
</form>

<form action="paypal" method="post" id="swd_s09_rw" style="display:none;">
Paypal button 3
</form>