homepage Welcome to WebmasterWorld Guest from 54.205.242.179
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Form working OK in Firefox - not in IE. Onclick issue ?
Hopefully simple if you've had it.
xert




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

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




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

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




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

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




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

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

xert




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

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




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

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




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

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




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

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




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved