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:

Code:

<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...

Code:


<!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

Code:

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:

Code:

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.

Thread: onclick not working in select drop down box

Thread Tools

Search Thread

onclick not working in select drop down box

Bookmarks

Bookmarks

Posting Permissions