Setting focus to the next field using jQuery onchange event

Question

I have a form with a select element and an input field. I want to set the focus to the input field when the value of the select element changes. I tried using jQuery's focus() method, but it doesn't seem to work. Here's my code:

function moveToNextField(selectElement) {
  console.log("got a call");
  $(".myField").focus("focus");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="http://localhost/ibsv2/public/admin/bootstrap/dist/js/bootstrap.bundle.min.js"></script>

<td width="80">
  <select name="tariff_code" class="form-control p-0 select2" onchange="moveToNextField(this)" id="tariff_code">
     <option value="1" >One</option>
      <option value="2" >Two</option>
       <option value="3" >Three</option>
  </select>
</td>
<td>
  <input type="text" placeholder="Number" name="app_number" class="form-control p-0 myField" minlength="7" maxlength="7" id="app_number" required> 
</td>

Use `$( "#app_number" ).trigger( "focus" );` instead of `$(".myField").focus("focus");`. [Docs are here](http://api.jquery.com/focus/) — Kirs Sudh, Jun 02 '23 at 06:14
Just remove the string "focus" - `.focus()`. There are many examples here: https://stackoverflow.com/questions/6738760/how-to-set-focus-on-input-field-using-jquery, https://stackoverflow.com/questions/21081248/set-focus-to-input-field, https://stackoverflow.com/questions/31376527/jquery-set-focus-to-input-fixed-focus, https://stackoverflow.com/questions/35070407/use-jquery-to-set-focus-to-input-with-keydown, https://stackoverflow.com/questions/18437017/how-to-set-focus-when-there-are-many-textbox-using-jquery ... — Don't Panic, Jun 02 '23 at 06:33
Does this answer your question? [How to Set Focus on Input Field using JQuery](https://stackoverflow.com/questions/6738760/how-to-set-focus-on-input-field-using-jquery) — Don't Panic, Jun 02 '23 at 06:34
I try both methods, access it via id and also use trigger. but its not working — Atiq krl1, Jun 02 '23 at 07:37
[Here is a copy of your code](http://jsfiddle.net/dont_panic/uL2qx7kc/) with the string/parameter "focus" removed, no other changes. It works fine. — Don't Panic, Jun 02 '23 at 09:45
@Don'tPanic I'm using jquery select2 libraray as well, that was creating an issue. still I'm tackling with issue. If I removed the class select2 then it works fine else it was creating an issue. give this error. " Cannot create property 'guid' on string 'focus' " — Atiq krl1, Jun 07 '23 at 04:09
Need to remove select2 before moving focus to next field. _________ function moveToNextField(selectElement) { $('#tariff_code').select2('destroy'); $("#app_number").focus(); $('#tariff_code').select2(); } — Atiq krl1, Jun 07 '23 at 04:24
Select2 focuses itself after `change` event, so your `focus` is immediately lost. One solution is to use `select2:close`. See https://stackoverflow.com/a/51892450/6089612. I [updated my JSFiddle](http://jsfiddle.net/dont_panic/uL2qx7kc/) to include Select2, using `select2:close`, and working. I also removed the (unused) `selectElement` parameter, and moved the inline `onchange` to a proper JS event handler. This should be closed as a duplicate of https://stackoverflow.com/q/24378615/6089612. — Don't Panic, Jun 07 '23 at 06:50
PS next time try to create [a minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the problem - the smallest amount of code **which demonstrates the problem**. The snippet you have here is nice and minimal, but it does not demonstrate the problem, so all the help you got is wrong, all wasted time. You need to spend time finding the minimal example, it will help you find the problem, and help others help you here on SO. — Don't Panic, Jun 07 '23 at 06:51

score 0 · Answer 1 · answered Jun 02 '23 at 06:45

Just remove the string focus inside focus() and you've id so grab with that instead of using class.

$("#app_number").focus();

Full snippet

function moveToNextField(selectElement) {
  console.log("got a call");
  $("#app_number").focus();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://localhost/ibsv2/public/admin/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<td width="80">
  <select name="tariff_code" class="form-control p-0 select2" onchange="moveToNextField(this)" id="tariff_code">
     <option value="1" >One</option>
      <option value="2" >Two</option>
       <option value="3" >Three</option>
  </select>
</td>
<td>
  <input type="text" placeholder="Number" name="app_number" class="form-control p-0 myField" minlength="7" maxlength="7" id="app_number" required> 
</td>

Setting focus to the next field using jQuery onchange event

1 Answers1