Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question onchange event doesn't trigger when for a drop-down list

    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?

  • #2
    New Coder
    Join Date
    Jan 2009
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question

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

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by vikram8jp View Post
    I have made a drop-down list on my html form using <select> tag.
    Little hard for anyone to help you without your code.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    35
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Question

    here is my code. It seems like the onchange event occurs when the focus goes away from the drop-down list.

    Code:
    <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>

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by vikram8jp View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •