'In Dropdown list onchange event

My code is as follows:

<!DOCTYPE html>
<html>
<body>
    <script>    
        function tab()
        {
            current=document.getElementById("test");
            next=document.getElementById("run");
            if(current.value!="-1")
            {
                next.focus()
            }
        }
    </script>
    <select id="test" onchange="tab()">
        <option value="-1">--select--</option>
        <option value="1" >TEST</option>
        <option value="2">RUN</option>
    </select>
    <input type="text" name="run"/>
</body>
</html>

Definition: I have a dropdown which is having four values. If I change one value to another value in the dropdown it autotab to the textbox. As per my code, it is working fine.

But the issue is when I select 1st value in the dropdown then the autotab is working and again I select the same value from the dropdown (autotab is not working). I know that the problem is in the event. There is no change so the event won't fire. Please help me to rectify the issue.

javascript jsp

Solution 1:^[1]

There is no element with id run, which is being referenced by:

document.getElementById("run");

You probably intended to write:

<input type="text" name="run" id="run"/>

Solution 2:^[2]

Use onBlur() instead of onchange().

The onBlur event is fired when you have moved away from an object without necessarily having changed its value.

The onChange event is only called when you have changed the value of the field.

please have a lookinto this to know about events

Solution 3:^[3]

Try using mouseup & keyup event as a work around:

var current = document.getElementById("test");
var next = document.getElementById("run");
var open = false; //drop-down closed

var watchOpen = function() {
  open = !open; //inverse flag to identify state of drop-down
};

var tab = function() {
  if (!open && current.value !== "-1") {
    next.focus();
  }
};

<select id="test" onmouseup="watchOpen();tab();" onkeyup="watchOpen();tab();">
  <option value="-1">--select--</option>
  <option value="1">TEST</option>
  <option value="2">RUN</option>
</select>
<input type="text" id="run" /><!-- replaced name with id -->

Solution 4:^[4]

try to use onBlur() .It will solve the problem

I think this is possible with html5

onselect

Solution 5:^[5]

Try this :

<!DOCTYPE html>
<html>
  <body>
    <select id="test" onchange="tab()">
      <option value="-1">--select--</option>
      <option value="1">TEST</option>
      <option value="2">RUN</option>
    </select>
    <input type="text" name="run" id="run" />
    <script type="text/javascript">
      function tab() {
        current = document.getElementById("test");
        next = document.getElementById("run");
        if (current.value != "-1") {
          next.focus();
          next.value = current.options[current.selectedIndex].text;
        } else {
          next.value = "";
        }
      }
    </script>
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Paul Lammertsma
Solution 2	Mallikarjuna Reddy
Solution 3
Solution 4	Karolis KonceviÄius
Solution 5	Romylussone

'In Dropdown list onchange event

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]