Log in

View Full Version : onclick not working in select drop down box


city_coder
05-31-2008, 08:51 AM
Hi guys this should be so simple.

Iv got drop down box like so:


<select name="category">
<option value="Choose">Choose a Category</option>
<option value="1" onclick="ajaxFunction(this.value)">Antiques</option>
<option value="2" onclick="ajaxFunction(this.value)">Baby</option>
<option value="3" onclick="ajaxFunction(this.value)">Clothes, Shoes & Accessories</option>
<option value="4" onclick="ajaxFunction(this.value)">Collectables</option>
<option value="5" onclick="ajaxFunction(this.value)">Computing</option>
<option value="6" onclick="ajaxFunction(this.value)">Dolls & Bears</option>
<option value="7" onclick="ajaxFunction(this.value)">Garden</option>
<option value="8" onclick="ajaxFunction(this.value)">Sports</option>
<option value="9" onclick="ajaxFunction(this.value)" >Toys & Games</option>
</select><br/>
<div id="ajaxDiv">
</div>


Obviously you can see that as soon as a category is selected a piece of javascript to get the subcategories is kicked off.

This piece of code works in firefox as does if i change the 'on' command to onchange. But it doesnt work in IE!! It also doesnt work with onmousedown and onfocus.

Can anyone tell me why and any way that i could go about fixing it?
coothead
05-31-2008, 10:37 AM
Hi there city_coder,

It is preferable and obviously simpler to use the onchange handler with the select element. ;)
Here is a basic example...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
window.onload=function() {
document.forms[0][0].onchange=function() {
if(this.value!='Choose') {
ajaxFunction(this.value);
}
}
}
function ajaxFunction(val) {
alert(val);
}
</script>

</head>
<body>

<form action="#">
<div>
<select name="category">
<option value="Choose">Choose a Category</option>
<option value="1">Antiques</option>
<option value="2">Baby</option>
<option value="3">Clothes, Shoes & Accessories</option>
<option value="4">Collectables</option>
<option value="5">Computing</option>
<option value="6">Dolls & Bears</option>
<option value="7">Garden</option>
<option value="8">Sports</option>
<option value="9" >Toys & Games</option>
</select>
</div>
</form>

</body>
</html>

coothead
city_coder
05-31-2008, 12:04 PM
Hiya coothead, nice try, but for some reason it doesnt want to work in my script. I mean the code works fine when its just that on the page but when i put in with the rest of my script it just does nothing.
I mean i dont understand the whole


window.onload=function() {
document.forms[0][0].onchange=function() {

bit

but i can see what its doing. it just doesnt seem to work in the rest of it. Obviously iv got more than 1 field to enter on the form and once that bit of code does work for me, i will have a 2nd drop down (select) box.

any suggestions
coothead
05-31-2008, 02:05 PM
Hi there city_coder,

the javascript code that I supplied will work with the html code that you supplied. ;)
If you are unable to adapt it, then you need to post the full form code at least.

coothead
jscheuer1
05-31-2008, 03:25 PM
Just as a note, this also sounds as though it could be a case of city_coder's version of the function:



onclick="ajaxFunction(this.value)"

simply not working in IE. It may have nothing to do with the approach used to assign the event, all of which in this thread look as though they should, or could work. Also, depending upon the IE version used, 7 to be exact, due to a new approach taken by MS to the request object, IE 7 often won't do AJAX scripted requests locally, the pages must be live (or the AJAX script can be edited to allow it to work locally as well).

Please post a link to the page on your site that contains the problematic code so we can check it out.