1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:36 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Form working OK in Firefox - not in IE. Onclick issue ?

Hopefully simple if you've had it.

         

xert

3:09 pm on Feb 8, 2010 (gmt 0)

10+ Year Member Top Contributors Of The Month



Hi folks,

Having fun and games - basically have form with javascript to show options concealed in DIV's when drop down clicked. Works fine in Firefox but in IE does not show div's when in IE. After 6 hours, I'm losing it ! Here's the complete code showing the javascript and the form code :


<html>
<head>
<script language="javascript">
function Display(which) {

em=document.getElementById("email");
ph=document.getElementById("phone");
if (which=="email") em.style.display="block";
else em.style.display="none";
if (which=="phone") ph.style.display="block";
else ph.style.display="none";
}
</script>
</head>
<body>
<form action="http://ww7.example.com/cf/addmulti.cfm" method="post" name="form1">
<input type="hidden" name="userid" value="9437628">
<input type="hidden" name="return" value="example.net/scripts/cart.php">
<p align="center">Option :
<input type="hidden" value="1" name="qty1">
<select name="productpr1">
<option selected value="">please select</option>
<option value="Platinum 2 seater fabric sofabed:539"onClick="Display('phone')">2 seater fabric sofabed</option>
<option value="Platinum 2 seater fabric fixed sofa:499"onClick="Display('email')">2 seater fabric fixed sofa</option>
</select>
<div ID="phone" style="display:none">
<select name="product1[]">
<option selected value="">please select</option>
<option value=", anthracite fabric">fabric : anthracite</option>
<option value=", beige fabric">fabric : beige</option>
</select>
</div>
<div ID="email" style="display:none">
<select name="product1[]">
<option selected value="">please select</option>
<option value=", bitter leather">leather : bitter</option>
<option value=", chestnut leather">leather : chestnut</option>
</select>
</div>
</form>

</body>
</html>

When I use the same structure but with radio buttons instead of a dropdown it works fine, so I presume the problem is in the drop down option "onclick" command.
Any help would be greatfully appreciated.

Regards
Chris

[edited by: tedster at 3:54 pm (utc) on Feb 8, 2010]
[edit reason] switch addresses to example.com [/edit]

londrum

4:11 pm on Feb 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



try using 'onchange', rather than 'onclick'.
i've got a select form on my site too, which redirects users to different places, and i use 
onchange="this.form.submit()"
on the select tag, which works okay.

Demaestro

4:27 pm on Feb 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



onblur should also do the trick.

If people are using keyboard shortcuts to select things from your form then onclick won't always fire for drop downs or radio buttons.

xert

4:37 pm on Feb 8, 2010 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks for your help Londrum - I've tried using onchange and the form won't work in either Firefox or IE with this.

xert

4:40 pm on Feb 8, 2010 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks Demaestro - I've tried using this but still to no avail. Question, have I formatted the option part of the form correctly as so -
<option value="Platinum 2 seater fabric sofabed:539"onblur="Display('phone')";>2 seater fabric sofabed</option>
<option value="Platinum 2 seater fabric fixed sofa:499"onblur="Display('email')">2 seater fabric fixed sofa</option>

Demaestro

6:08 pm on Feb 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



oh.... not sure if this will help but it looks like you have a misplaced semi-colon.

YOU HAVE THIS (semi-colon outside double quotes):
<option value="Platinum 2 seater fabric sofabed:539"onblur="Display('phone')";>2 seater fabric sofabed</option>

YOU SHOULD HAVE THIS (moved semi-colon into double quotes):
<option value="Platinum 2 seater fabric sofabed:539"onblur="Display('phone');">2 seater fabric sofabed</option>

londrum

6:44 pm on Feb 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



i reckon you need to include the onchange or onblur just once, on the <select> tag itself. try that, whilst removing them all from all the <option> tags.

rocknbil

6:59 pm on Feb 8, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



First, I don't know why you are using "phone" and "email" for your values. The values have nothing to do with phone or email. Examine this, understand how and why it works . . . . I suggest adding another parameter to your options to represent the show/hide ID, as they are already colon delimited. Use JS to grab the last value. In your PHP you can just do an explode and pop it off the array, which effectively "throws it away."

Note also that this approach allows expandability of the number of show/hide divs you can have by just expanding the divs array:

var divs = Array('p1-div','p2-div','p3-div','p4-div');

If this works for you, remove the containing div (changed to paragraph in my sample,) assign the ID directly to the select. Less is more. :-) 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<!-- doctype on one line --> 
<html lang="en"> 
<head> 
<title>Test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<script type="text/javascript"> 
window.onload=function() { attachBehaviors(); }; 
function attachBehaviors() { 
 if (document.getElementById('productpr1')) { 
 document.getElementById('productpr1').onchange=function() {  
 Display(this,this.selectedIndex);  
}; 
 } 
} 
function Display(obj,selind) { 
 if (! document.getElementById(obj.id)) {  
 alert('Oops! Something is not id\'ed correctly ' + obj.id);  
 return; 
 } 
 var divs = Array('p1-div','p2-div'); 
 var opts = obj.options[selind].value.split(':'); 
 var div = opts[opts.length-1]; // takes last item, arrays are zero based. 
 for (j=0;j<divs.length;j++) { 
 if (document.getElementById(divs[j])) { 
  document.getElementById(divs[j]).style.display= 
 (divs[j]==div)?'block':'none'; 
 } 
 } 
} 
</script> 
</head> 
<body> 
<form action="http://ww7.example.com/cf/addmulti.cfm" method="post" name="form1"> 
 <input type="hidden" name="userid" value="9437628"> 
 <input type="hidden" name="return" value="example.net/scripts/cart.php"> 
 <p style="text-align:center;">Option : 
 <input type="hidden" value="1" name="qty1"> 
 <select name="productpr1" id="productpr1"> 
 <option selected value="">please select</option> 
 <option value="Platinum 2 seater fabric sofabed:539:p1-div">2 seater fabric sofabed</option> 
 <option value="Platinum 2 seater fabric fixed sofa:499:p2-div">2 seater fabric fixed sofa</option> 
 </select> 
 </p> 
 <p id="p1-div" style="display:none;text-align:center;"> 
 <select name="product1[]" id="product1-select"> 
 <option selected value="">please select</option> 
 <option value=", anthracite fabric">fabric : anthracite</option> 
 <option value=", beige fabric">fabric : beige</option> 
 </select> 
 </p> 
 <p id="p2-div" style="display:none;text-align:center;"> 
 <select name="product1[]" id="product2-select"> 
 <option selected value="">please select</option> 
 <option value=", bitter leather">leather : bitter</option> 
 <option value=", chestnut leather">leather : chestnut</option> 
 </select> 
</p> 
</form> 
</body> 
</html>

xert

7:54 pm on Feb 8, 2010 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks a million guys for your help, especially Rocknbil for working through the problem. The illustration you've provided works fine - I'll have a go at implementing it tomorrow.
Kindest regards

Chris

xert

8:10 pm on Feb 9, 2010 (gmt 0)

10+ Year Member Top Contributors Of The Month



Finally adapted Rocknbil's script above into my webpage. Here's the page with the form script working in the product order box, bottom right of page.
One question if anyone could help ?
Is it possible to add multiple values in the 'option value' field of the form select, for example -
<option value="Platinum 2 seater fabric sofabed:539:p1-div,p2-div,p3-div">2 seater fabric sofabed</option>
... so resulting in all three divs showing when this option selected ?
Thanks in advance for any help on this one.
Chris

xert

8:13 pm on Feb 9, 2010 (gmt 0)

10+ Year Member Top Contributors Of The Month



Link to show page -
[sofabedgallery.co.uk...]
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 1:36 am May 14, 2026