CODEWITHSUNDEEP
javascriptjqueryhtml
trex
trex

Reputation: 4057

Move focus to next field if user doesn't change the option

I have a HTML Select list as follows: 

<div class="somebox" id="somebox">
     <select name="myoptions" id="myoptions">
        <option value="1">Some Text 1 </option>
        <option value="2">Some Text 2 </option>
        <option value="3">Some Text 3</option>
        <option value="4">Some Text 4 </option>
      </select>
      <input type="text" name="somename1" id="somename1">
      <input type="text" name="somename2" id="somename2">
</div>

And Have some JavaScript code, which moves the focus to the next element on change of #myoptions.

$("#somebox").on("change", "#myoptions", function(){
   $("#somename1").focus()
});

The question is: - How can I move the focus to the next element if user just clicks on the select list, checks other options in the list but doesn't change the option? (In this case, focus lies there on the same select, because user doesn't change the value)

Here is the JSFiddle created.

Note- In our code tab key is disabled, so quite hard for user to move the focus to the next element.

Upvotes: 1

Views: 181

Answers (1)

huan feng
huan feng

Reputation: 8623

Is this you wanted?

var cc = 0;

$('#somebox').click(function () {
    cc++;
    if (cc == 2) {
        $(this).change();
        cc = 0;
    }
}).change(function () {
    $("#somename1").focus();
    cc = -1;
});

fiddle

I found there is a similar thread talking about this: useful example

Upvotes: 1

Related Questions