Forum Moderators: open
The error message says:"document.forms[0].elements.shippingCode.style"
Can anyone see why I might be getting an error?
<!--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>
A few things, and some major changes that make it all go away.
- use document.getElementById instead, assign ID's to all form elements.
- Always have a "blank" value at the tops of select lists to allow the form to be reset. This is not "mandatory" but is a good practice; often people submit without selecting an item and it could be wrong.
- "onload=" doesn't work on it's own, use window.onload=function(){};.
- Corollary to that, use the window.onload to attach behaviors to your elements, cleaning up the HTML. Also, if you wonder why JS is "unaware" of the display state of shippingP after setting the style in the style sheet, and why you have to explicitly set it onload, see this thread [webmasterworld.com].
- you used the correct method on goThere() to access the selected value, but overlooked it in countryShip.
- location.href might work, I've never used it; tried and tested is document.location.
- in various places I test for existence; that is, if (document.getElementById('elementID')).... this allows the code to be in place on pages without these items and suppress "null or not an object" errors.
- The text field on it's own has no meaning; instead I put it in a wrapper with a label.
- Corollary, hidden still takes up space; use display:none/block instead.
Validated and tested code. Of course, swap out ¦¦ for real pipe characters.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype all on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javaScript">
window.onload = function(){
if (document.getElementById('shippingP')) {
document.getElementById('shippingP').style.display='none';
}
attachBehaviors();
};
function attachBehaviors() {
if (document.getElementById('countryShip')) {
document.getElementById('countryShip').onchange = function() {
showhide(this.form,this.options[this.selectedIndex].value);
}
}
if (document.getElementById('s1')) {
document.getElementById('s1').onchange = function() {
goThere(this.options[this.selectedIndex].value);
}
}
}
function showhide(f,v){
if (document.getElementById('shippingP')) {
var t = document.getElementById('shippingP');
t.style.display = (v=='International' ¦¦ v=='Custom')?'block':'none';
}
}
function goThere(loc) {
if (loc == '') { alert('Please select a location.'); }
else { window.document.location=loc; }
}
</script>
</head>
<body>
<form name="order" id="order" method="post" action="orderForm.cfm">
<select name="countryShip" id="countryShip">
<option value="">Select Shipping</option>
<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>
<p id="shippingP"><label for="shippingCode">Enter Postcode:</label>
<input name="shippingCode" id="shippingCode" type="text" value=""></p>
</form><!--dropdow for url redirect-->
<form name="jump" id="jump" method="post" action="">
<select name="s1" id="s1">
<option value="">Select</option>
<option value="page1.html">place1</option>
<option value="page2.html">place2</option>
<option value="page3.html">place3</option>
</select>
</form>
</body>
</html>
Thank you so much for your help and great advice. I really appreciate it.
