jQuery - change focus on next input

Question

I have this code

<form method="post" class="form-horizontal" role="form">
  <label for="qt" class="control-label">Qt</label>
  <input type="text" class="form-control" id="qt" name="qt" min="1" step="1" />
  <label for="code" class="control-label">Code</label>
  <input type="text" class="form-control" id="code" name="code" placeholder="code" />
  <button type="submit" class="btn btn-default">Submit</button>

An operator uses a barcode scanner to insert the data into input fields, so I have to create a jQuery code that automatically focuses on the next input when "qt" has been changed and submit the form when the "code" has been changed.

I read another similar post and I wrote this:

$(document).ready(function(){
  $("#qt").change(function () {
    $(this).nextAll("input").first().focus();
  });
  $("#code").change(function () {
    this.form.submit();
  });
});

but it does not work properly. You can try on jsfiddle.net

Answer 1

From your post:

I have this code

Well, in fact, you don't. The code in your jsFiddle link is very different. Rather than the flat structure that you show in your question, there is a nested structure. nextAll searches only among siblings of the current element (not among the whole HTML).

Your traversal method needs to be more complex. Something like this would do:

$(this).closest('div.control-group').next().find('input').first().focus();

fiddle