...

View Full Version : onchange event doesn't trigger when for a drop-down list



vikram8jp
01-21-2009, 02:04 AM
Hello all,

I have made a drop-down list on my html form using <select> tag. I am using a onchange event for this select tag.
My problem is that the onchange event triggers only when I use the mouse to change the value to drop-down list. When I use tab key to focus on the list and then change the value using up-down keys, the onchange event does not get triggered.

Why does this happen? and is there a solution to this problem?

vikram8jp
01-21-2009, 02:09 AM
Actually sometimes it does work. Like when I change the options of another drop-down list when the onchange of first drop-down list is triggered, that is working.
But some actions like I want to change the background color of a row of table when onchange event occurs, that is not working... !!!!!

Arbitrator
01-21-2009, 02:26 AM
I have made a drop-down list on my html form using <select> tag.Little hard for anyone to help you without your code.

vikram8jp
01-21-2009, 02:53 AM
here is my code. It seems like the onchange event occurs when the focus goes away from the drop-down list.



<html>
<head>
<title></title>
<link href="./css/common.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript">
function fncChangeUser(obj)
{
str_regex = /^cmb(\d+)$/;
row_no = parseInt(obj.name.match(str_regex)[1]);
row_obj = document.getElementById("row" + row_no);
if(obj.value == "A")
{
row_obj.style.background = "white";
}
else if(obj.value == "B")
{
row_obj.style.background = "black";
}
}
</script>
</head>
<body>
<form name="frm">
<table border="2">
<tr id="row1" class="">
<td>
<select name="cmb1" onchange="fncChangeUser(this)">
<option value="A">A</option>
<option value="B">B</option>
</select>
</td>
<td>Vikram</td>
</tr>
<tr id="row2" class="">
<td>
<select name="cmb2" onchange="fncChangeUser(this)">
<option value="A">A</option>
<option value="B">B</option>
</select>
</td>
<td>Vikram</td>
</tr>
</table>
</form>
</body>
</html>

Arbitrator
01-22-2009, 07:44 AM
here is my code. It seems like the onchange event occurs when the focus goes away from the drop-down list.I just tested that code in Mozilla Firefox 3.0.5 with no issues. onchange is supposed to be triggered immediately before the blur (i.e., defocus) event and, as far as I can tell, behaves as expected.

You can defocus the element via keyboard by pressing the Enter key to submit the form (even without a submission button), pressing the Tab key to shift focus to another element, etc. The options depend upon your OS and browser.

On a side note though, your HTML is very poorly written and contains, at least, four errors.

brandonH
01-22-2009, 08:12 AM
as Arbitrator stated, the onchange event occurse right before the blur. this happens because if a person is using the keyboard to change the value of a select box it would be annoying and inefficient to trigger the onchange event everytime the user hit an arrow key. what if the user doesnt want the first thing that the arrow key goes to, maybe they want the third or fourth item. it only makes sense to have the onchange event happen after the user has selected the option they want. on a second note, notice that when you click the select with the mouse and roll over the options that it doesnt trigger the onchange? its the same using the arrow keys. the keys do not change the value of the select they just highlight a the option that is currently being focused for possible selection, the change/selection does not occur until you hit the enter key. with a mouse it works the same way the option that is highlighted is not selected until you click the mouse.

if you are absolutely positive that you want the keys to trigger the call to the function that the onchange does, you will need to add the onkeyup event to the select that calls to the same function as the onchange. although i do not recommend this as per the reason stated above.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum