Two select forms with onChange gives javascript error

**mayamacd** · 06-10-2009, 07:33 PM

I have two select forms both using onChange but I am getting an error message when they are both used on the same page. When they are used seperately they work fine without error message. One form just redirects the user to a new page based on what user selects, the second select form displays a text field if a certain option is selected.
The error message says:"document.forms[0].elements.shippingCode.style"

Can anyone see why I might be getting an error?

Code:

<!--drop down form with hidden text field--> 

<script type="text/JavaScript"> 
function showhide(f,v){ 
var t = f.elements['shippingCode']; 
if(v=='International' ¦¦ v=='Custom'){t.style.visibility='visible'} 
else{t.style.visibility='hidden'} 
} 
onload = function(){document.forms[0].elements['shippingCode'].style.visibility='hidden'} 
</script> 

<form name="order" id="order" method="post" action="orderForm.cfm"> 
<select name="countryShip" onchange="showhide(this.form,this.value)"> 
<option value="United States"> Stardard (ship to US)</option> 
<option value="Canada">Standard (ship to Canada)</option> 
<option value="International"> International</option> 
<option value="Custom"> Custom Shipping</option> 
</select> 
<input name="shippingCode" type="text" value=""> 
</form> 


<!--dropdow for url redirect--> 

<script type="text/javascript"> 
function goThere(loc) 
{ 
window.location.href=loc; 
} 
</script> 
<FORM> 
<select onChange="goThere(this.options[this.selectedIndex].value)" name="s1"> 
<option value="page1.html">place1</option> 
<option value="page2.html">place2</option> 
<option value="page3.html">place3</option> 
</select> 
</FORM>

**forum_amnesiac** · 06-11-2009, 07:44 AM

Is it possible to see more of your code.

I have looked at your code and the only problem I've had so far was that my validator reported an error in this line:

Code:

if(v=='International' ¦¦ v=='Custom'){t.style.visibility='visible'}

telling me it should be this:

Code:

if(v=='International' || v=='Custom'){t.style.visibility='visible';}

Without more of the code I can't really test your problem

**mayamacd** · 06-11-2009, 02:04 PM

Thanks for your help!

There really isn't too much more to the code. Here's the page in full if you'd like to test it out. If you comment out the form and javascript for the redirect dropdown the shipping form and javascript works fine.

Note: the text field for the shipping form is supposed to be hidden when you first land on the page and only show up if you select "International" or "Custom", however it is showing up when you first land on the page and there is an error message.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>test page</title>

<!--shipping javascript--->

<script type="text/JavaScript">
function showhide(f,v){
var t = f.elements['shippingCode'];
if(v=='International' || v=='Custom'){t.style.visibility='visible';}
else{t.style.visibility='hidden'}
}
onload = function(){document.forms[0].elements['shippingCode'].style.visibility='hidden'}
</script>	

<!--redirect javascript--->

<script type="text/javascript"> 
function goThere(loc) 
{ 
window.location.href=loc; 
} 
</script>
</head>
<body>

<!--shipping form-->
Shipping form:
<form name="order" id="order" method="post" action="orderForm.cfm"> 
<select name="countryShip" onchange="showhide(this.form,this.value)"> 
<option value="United States"> Stardard (ship to US)</option> 
<option value="Canada">Standard (ship to Canada)</option> 
<option value="International"> International</option> 
<option value="Custom"> Custom Shipping</option> 
</select> 
<input name="shippingCode" type="text" value=""> 
</form> 


<!--redirect form-->
Redirect form:
<FORM> 
<select onChange="goThere(this.options[this.selectedIndex].value)" name="s1"> 
<option value="page1.html">place1</option> 
<option value="page2.html">place2</option> 
<option value="page3.html">place3</option> 
</select> 
</FORM>


</body>
</html>

**forum_amnesiac** · 06-11-2009, 04:21 PM

I've just tried your code and got no problems at all.

I tried with just one form, and then with the second.

Both times I only got the extra box when I should have and there were no errors

**mayamacd** · 06-12-2009, 02:20 PM

Oops, my bad...the forms are in the wrong order. The redirect form needed to go first. That's when the error occurs and I need to keep the forms in this order as the redirect is up in the main menu.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>test page</title>


<!--shipping javascript--->

<script type="text/JavaScript">
function showhide(f,v){
var t = f.elements['shippingCode'];
if(v=='International' || v=='Custom'){t.style.visibility='visible';}
else{t.style.visibility='hidden'}
}
onload = function(){document.forms[0].elements['shippingCode'].style.visibility='hidden'}
</script>	

<!--redirect javascript--->

<script type="text/javascript"> 
function goThere(loc) 
{ 
window.location.href=loc; 
} 
</script>



</head>
<body>




<!--redirect form-->
Redirect form:
<FORM> 
<select onChange="goThere(this.options[this.selectedIndex].value)" name="s1"> 
<option value="page1.html">place1</option> 
<option value="page2.html">place2</option> 
<option value="page3.html">place3</option> 
</select> 
</FORM>

<!--shipping form-->
Shipping form:
<form name="order" id="order" method="post" action="orderForm.cfm"> 
<select name="countryShip" onchange="showhide(this.form,this.value)"> 
<option value="United States"> Stardard (ship to US)</option> 
<option value="Canada">Standard (ship to Canada)</option> 
<option value="International"> International</option> 
<option value="Custom"> Custom Shipping</option> 
</select> 
<input name="shippingCode" type="text" value=""> 
</form> 


</body>
</html>

**forum_amnesiac** · 06-12-2009, 04:41 PM

Tour problem is not to do with the 2 onchange events, it is to do with the fact that the field in the second has not been initialised when the body onload function is used.

This is throwing a "not an object" error.

Do you really need this as 2 forms in the one page, can you not make it a single form like this:

HTML Code:

<form name="order" id="order" name="order" method="post" action="orderForm.cfm" > 
<select onChange="goThere(this.options[this.selectedIndex].value)" name="s1"> 
<option value="page1.html">place1</option> 
<option value="page2.html">place2</option> 
<option value="page3.html">place3</option> 
</select> 

<br />
<br />
<!--shipping form-->
Shipping form:
<select name="countryShip" onchange="showhide(this.form,this.value)"> 
<option value="United States"> Stardard (ship to US)</option> 
<option value="Canada">Standard (ship to Canada)</option> 
<option value="International"> International</option> 
<option value="Custom"> Custom Shipping</option> 
</select> 
<input name="shippingCode" type="text" value=""> 
</form>

**mayamacd** · 06-15-2009, 01:53 PM

Thanks for the reply. They sort of do need to be set up in two different forms because the redirect is located on every page of the site, whereas the Shipping method is only on one page. However, just to get it working I've set it up dynamically so it's one form when you are on the shipping page, otherwise the redirect will be it's own form on all other pages.

Thanks for all your help!

Thread: Two select forms with onChange gives javascript error

Thread Tools

Search Thread

Two select forms with onChange gives javascript error

Bookmarks

Bookmarks

Posting Permissions