Set focus to the next input element












1














I have a bootstrap form where I want to set the focus to the next 'enabled' input element upon pressing enter key. When I press enter in Barcode input element, I want to set the focus to the Quantity input element since it is the next enabled input element.






<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>





What I have tried so far is:



$(":input").keydown(function(event){

    if (event.keyCode === 13) {

        $(this).nextAll(':input:enabled').first().focus();

    }

});


But this doesn't work as I expect.






javascript jquery







share|improve this question






















  • .nextAll only looks at siblings, not the whole HTML
    – freedomn-m
    Nov 11 at 6:40
















1














I have a bootstrap form where I want to set the focus to the next 'enabled' input element upon pressing enter key. When I press enter in Barcode input element, I want to set the focus to the Quantity input element since it is the next enabled input element.






<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>





What I have tried so far is:



$(":input").keydown(function(event){

    if (event.keyCode === 13) {

        $(this).nextAll(':input:enabled').first().focus();

    }

});


But this doesn't work as I expect.






javascript jquery







share|improve this question






















  • .nextAll only looks at siblings, not the whole HTML
    – freedomn-m
    Nov 11 at 6:40














1












1








1







I have a bootstrap form where I want to set the focus to the next 'enabled' input element upon pressing enter key. When I press enter in Barcode input element, I want to set the focus to the Quantity input element since it is the next enabled input element.






<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>





What I have tried so far is:



$(":input").keydown(function(event){

    if (event.keyCode === 13) {

        $(this).nextAll(':input:enabled').first().focus();

    }

});


But this doesn't work as I expect.






javascript jquery







share|improve this question













I have a bootstrap form where I want to set the focus to the next 'enabled' input element upon pressing enter key. When I press enter in Barcode input element, I want to set the focus to the Quantity input element since it is the next enabled input element.






<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>





What I have tried so far is:



$(":input").keydown(function(event){

    if (event.keyCode === 13) {

        $(this).nextAll(':input:enabled').first().focus();

    }

});


But this doesn't work as I expect.






<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>





<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>





javascript jquery




javascript jquery






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 11 at 6:22









Lakmal Premaratne

315411




315411












  • .nextAll only looks at siblings, not the whole HTML
    – freedomn-m
    Nov 11 at 6:40


















  • .nextAll only looks at siblings, not the whole HTML
    – freedomn-m
    Nov 11 at 6:40
















.nextAll only looks at siblings, not the whole HTML
– freedomn-m
Nov 11 at 6:40




.nextAll only looks at siblings, not the whole HTML
– freedomn-m
Nov 11 at 6:40












3 Answers
3






active

oldest

votes


















3














next(), nextAll(), and the other similar methods are for finding siblings. Since none of your inputs are actual siblings this will not work.



What you can do however is:





  1. Get a jQuery object of all the enabled inputs



    var enabledInputs = $("input:enabled");



  2. Get the index of the current input in that jQuery object using index()



    var idx = enabledInputs.index(this);



  3. Then using that index get the element at index+1 using eq()



    enabledInputs.eq(idx+1).focus();




Demo 






$(":input").keydown(function(event){

    if (event.keyCode === 13) {

      var enabledInputs = $("input:enabled");

      var idx = enabledInputs.index(this);

      enabledInputs.eq(idx+1).focus()

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>








share|improve this answer





















  • I was amazed by the prompt response I got. Thank you a lot... It worked.
    – Lakmal Premaratne
    Nov 11 at 6:43





















0














The next input is not a sibling of the #barcode input, so nextAll won't work at that point. Try navigating to the parent's parent, the div class="col-, and then use nextAll to recursively search through that parent's siblings until a matching element is found:






$(":input").keydown(function(event) {

  if (event.keyCode !== 13) return;

  $(this)

    .parent()

    .parent() // get to the `class=col-#` element

    .nextAll(':input:enabled')

    .first()

    .focus();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />



<div class="row">

  <div class="col-3 pr-0">

    <div class="form-group">

      <label for="txtBarcode">Barcode</label>

      <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

  <div class="col-7 pl-2 pr-0">

    <div class="form-group">

      <label for="txtPartDesc">Description</label>

      <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

  <div class="col-2 pl-2">

    <div class="form-group">

      <label for="txtUom">UoM</label>

      <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

</div>

<div class="row">

  <div class="col-4 pr-0">

    <div class="form-group">

      <label for="txtQuantity">Quantity</label>

      <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

</div>








share|improve this answer





















  • Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
    – Lakmal Premaratne
    Nov 11 at 6:45



















0














If I understand your question correctly then one solution to this problem is to update your keydown() handler like so:



  if (event.keyCode === 13) {



      // Get all enabled inputs in the document

      var inputs = $('input:enabled');



      // Iterate all inputs, searching for the index of the "next" input to "this"

      for(var i = 0; i < inputs.length; i++) {



        // If the "global" index of "this" input is found

        if( $(inputs).eq(i).is( $(this) ) ) {



          // Then select the "next" input by incrementing the index, and call

          // focus on that input if it exists

          inputs.eq(i + 1)

          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 

          .focus();



          // Exit the loop now that focus has been called on "next" input

          break

        }

      } 

    }


The idea here is to select the next input element based on the order that they occur in the DOM, rather than to select the next input element based on adjacent siblings to the input that "enter" is pressed. This solution also corrects a few minor errors in your code's selector syntax. Here's a working demo:






$("input").keydown(function(event){

 

    if (event.keyCode === 13) {

     

      var inputs = $('input:enabled');

      

      for(var i = 0; i < inputs.length; i++) {

        if( $(inputs).eq(i).is( $(this) ) ) {

          inputs.eq(i + 1)

          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 

          .focus()

          break

        }

      } 

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>








share|improve this answer























  • Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
    – Lakmal Premaratne
    Nov 11 at 6:46










  • @LakmalPremaratne hey you're welcome! Hope this is of some help to you in your learning :-)
    – Dacre Denny
    Nov 11 at 6:48











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246365%2fset-focus-to-the-next-input-element%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























3 Answers
3






active

oldest

votes








3 Answers
3






active

oldest

votes









active

oldest

votes






active

oldest

votes









3














next(), nextAll(), and the other similar methods are for finding siblings. Since none of your inputs are actual siblings this will not work.



What you can do however is:





  1. Get a jQuery object of all the enabled inputs



    var enabledInputs = $("input:enabled");



  2. Get the index of the current input in that jQuery object using index()



    var idx = enabledInputs.index(this);



  3. Then using that index get the element at index+1 using eq()



    enabledInputs.eq(idx+1).focus();




Demo 






$(":input").keydown(function(event){

    if (event.keyCode === 13) {

      var enabledInputs = $("input:enabled");

      var idx = enabledInputs.index(this);

      enabledInputs.eq(idx+1).focus()

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>








share|improve this answer





















  • I was amazed by the prompt response I got. Thank you a lot... It worked.
    – Lakmal Premaratne
    Nov 11 at 6:43


















3














next(), nextAll(), and the other similar methods are for finding siblings. Since none of your inputs are actual siblings this will not work.



What you can do however is:





  1. Get a jQuery object of all the enabled inputs



    var enabledInputs = $("input:enabled");



  2. Get the index of the current input in that jQuery object using index()



    var idx = enabledInputs.index(this);



  3. Then using that index get the element at index+1 using eq()



    enabledInputs.eq(idx+1).focus();




Demo 






$(":input").keydown(function(event){

    if (event.keyCode === 13) {

      var enabledInputs = $("input:enabled");

      var idx = enabledInputs.index(this);

      enabledInputs.eq(idx+1).focus()

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>








share|improve this answer





















  • I was amazed by the prompt response I got. Thank you a lot... It worked.
    – Lakmal Premaratne
    Nov 11 at 6:43
















3












3








3






next(), nextAll(), and the other similar methods are for finding siblings. Since none of your inputs are actual siblings this will not work.



What you can do however is:





  1. Get a jQuery object of all the enabled inputs



    var enabledInputs = $("input:enabled");



  2. Get the index of the current input in that jQuery object using index()



    var idx = enabledInputs.index(this);



  3. Then using that index get the element at index+1 using eq()



    enabledInputs.eq(idx+1).focus();




Demo 






$(":input").keydown(function(event){

    if (event.keyCode === 13) {

      var enabledInputs = $("input:enabled");

      var idx = enabledInputs.index(this);

      enabledInputs.eq(idx+1).focus()

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>








share|improve this answer












next(), nextAll(), and the other similar methods are for finding siblings. Since none of your inputs are actual siblings this will not work.



What you can do however is:





  1. Get a jQuery object of all the enabled inputs



    var enabledInputs = $("input:enabled");



  2. Get the index of the current input in that jQuery object using index()



    var idx = enabledInputs.index(this);



  3. Then using that index get the element at index+1 using eq()



    enabledInputs.eq(idx+1).focus();




Demo 






$(":input").keydown(function(event){

    if (event.keyCode === 13) {

      var enabledInputs = $("input:enabled");

      var idx = enabledInputs.index(this);

      enabledInputs.eq(idx+1).focus()

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>








$(":input").keydown(function(event){

    if (event.keyCode === 13) {

      var enabledInputs = $("input:enabled");

      var idx = enabledInputs.index(this);

      enabledInputs.eq(idx+1).focus()

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>





$(":input").keydown(function(event){

    if (event.keyCode === 13) {

      var enabledInputs = $("input:enabled");

      var idx = enabledInputs.index(this);

      enabledInputs.eq(idx+1).focus()

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 11 at 6:38









Patrick Evans

31.8k54470




31.8k54470












  • I was amazed by the prompt response I got. Thank you a lot... It worked.
    – Lakmal Premaratne
    Nov 11 at 6:43




















  • I was amazed by the prompt response I got. Thank you a lot... It worked.
    – Lakmal Premaratne
    Nov 11 at 6:43


















I was amazed by the prompt response I got. Thank you a lot... It worked.
– Lakmal Premaratne
Nov 11 at 6:43






I was amazed by the prompt response I got. Thank you a lot... It worked.
– Lakmal Premaratne
Nov 11 at 6:43















0














The next input is not a sibling of the #barcode input, so nextAll won't work at that point. Try navigating to the parent's parent, the div class="col-, and then use nextAll to recursively search through that parent's siblings until a matching element is found:






$(":input").keydown(function(event) {

  if (event.keyCode !== 13) return;

  $(this)

    .parent()

    .parent() // get to the `class=col-#` element

    .nextAll(':input:enabled')

    .first()

    .focus();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />



<div class="row">

  <div class="col-3 pr-0">

    <div class="form-group">

      <label for="txtBarcode">Barcode</label>

      <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

  <div class="col-7 pl-2 pr-0">

    <div class="form-group">

      <label for="txtPartDesc">Description</label>

      <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

  <div class="col-2 pl-2">

    <div class="form-group">

      <label for="txtUom">UoM</label>

      <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

</div>

<div class="row">

  <div class="col-4 pr-0">

    <div class="form-group">

      <label for="txtQuantity">Quantity</label>

      <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

</div>








share|improve this answer





















  • Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
    – Lakmal Premaratne
    Nov 11 at 6:45
















0














The next input is not a sibling of the #barcode input, so nextAll won't work at that point. Try navigating to the parent's parent, the div class="col-, and then use nextAll to recursively search through that parent's siblings until a matching element is found:






$(":input").keydown(function(event) {

  if (event.keyCode !== 13) return;

  $(this)

    .parent()

    .parent() // get to the `class=col-#` element

    .nextAll(':input:enabled')

    .first()

    .focus();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />



<div class="row">

  <div class="col-3 pr-0">

    <div class="form-group">

      <label for="txtBarcode">Barcode</label>

      <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

  <div class="col-7 pl-2 pr-0">

    <div class="form-group">

      <label for="txtPartDesc">Description</label>

      <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

  <div class="col-2 pl-2">

    <div class="form-group">

      <label for="txtUom">UoM</label>

      <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

</div>

<div class="row">

  <div class="col-4 pr-0">

    <div class="form-group">

      <label for="txtQuantity">Quantity</label>

      <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

</div>








share|improve this answer





















  • Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
    – Lakmal Premaratne
    Nov 11 at 6:45














0












0








0






The next input is not a sibling of the #barcode input, so nextAll won't work at that point. Try navigating to the parent's parent, the div class="col-, and then use nextAll to recursively search through that parent's siblings until a matching element is found:






$(":input").keydown(function(event) {

  if (event.keyCode !== 13) return;

  $(this)

    .parent()

    .parent() // get to the `class=col-#` element

    .nextAll(':input:enabled')

    .first()

    .focus();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />



<div class="row">

  <div class="col-3 pr-0">

    <div class="form-group">

      <label for="txtBarcode">Barcode</label>

      <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

  <div class="col-7 pl-2 pr-0">

    <div class="form-group">

      <label for="txtPartDesc">Description</label>

      <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

  <div class="col-2 pl-2">

    <div class="form-group">

      <label for="txtUom">UoM</label>

      <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

</div>

<div class="row">

  <div class="col-4 pr-0">

    <div class="form-group">

      <label for="txtQuantity">Quantity</label>

      <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

</div>








share|improve this answer












The next input is not a sibling of the #barcode input, so nextAll won't work at that point. Try navigating to the parent's parent, the div class="col-, and then use nextAll to recursively search through that parent's siblings until a matching element is found:






$(":input").keydown(function(event) {

  if (event.keyCode !== 13) return;

  $(this)

    .parent()

    .parent() // get to the `class=col-#` element

    .nextAll(':input:enabled')

    .first()

    .focus();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />



<div class="row">

  <div class="col-3 pr-0">

    <div class="form-group">

      <label for="txtBarcode">Barcode</label>

      <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

  <div class="col-7 pl-2 pr-0">

    <div class="form-group">

      <label for="txtPartDesc">Description</label>

      <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

  <div class="col-2 pl-2">

    <div class="form-group">

      <label for="txtUom">UoM</label>

      <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

</div>

<div class="row">

  <div class="col-4 pr-0">

    <div class="form-group">

      <label for="txtQuantity">Quantity</label>

      <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

</div>








$(":input").keydown(function(event) {

  if (event.keyCode !== 13) return;

  $(this)

    .parent()

    .parent() // get to the `class=col-#` element

    .nextAll(':input:enabled')

    .first()

    .focus();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />



<div class="row">

  <div class="col-3 pr-0">

    <div class="form-group">

      <label for="txtBarcode">Barcode</label>

      <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

  <div class="col-7 pl-2 pr-0">

    <div class="form-group">

      <label for="txtPartDesc">Description</label>

      <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

  <div class="col-2 pl-2">

    <div class="form-group">

      <label for="txtUom">UoM</label>

      <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

</div>

<div class="row">

  <div class="col-4 pr-0">

    <div class="form-group">

      <label for="txtQuantity">Quantity</label>

      <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

</div>





$(":input").keydown(function(event) {

  if (event.keyCode !== 13) return;

  $(this)

    .parent()

    .parent() // get to the `class=col-#` element

    .nextAll(':input:enabled')

    .first()

    .focus();

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />



<div class="row">

  <div class="col-3 pr-0">

    <div class="form-group">

      <label for="txtBarcode">Barcode</label>

      <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

  <div class="col-7 pl-2 pr-0">

    <div class="form-group">

      <label for="txtPartDesc">Description</label>

      <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

  <div class="col-2 pl-2">

    <div class="form-group">

      <label for="txtUom">UoM</label>

      <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

    </div>

  </div>

</div>

<div class="row">

  <div class="col-4 pr-0">

    <div class="form-group">

      <label for="txtQuantity">Quantity</label>

      <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

    </div>

  </div>

</div>






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 11 at 6:33









CertainPerformance

74.3k143659




74.3k143659












  • Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
    – Lakmal Premaratne
    Nov 11 at 6:45


















  • Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
    – Lakmal Premaratne
    Nov 11 at 6:45
















Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
– Lakmal Premaratne
Nov 11 at 6:45




Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
– Lakmal Premaratne
Nov 11 at 6:45











0














If I understand your question correctly then one solution to this problem is to update your keydown() handler like so:



  if (event.keyCode === 13) {



      // Get all enabled inputs in the document

      var inputs = $('input:enabled');



      // Iterate all inputs, searching for the index of the "next" input to "this"

      for(var i = 0; i < inputs.length; i++) {



        // If the "global" index of "this" input is found

        if( $(inputs).eq(i).is( $(this) ) ) {



          // Then select the "next" input by incrementing the index, and call

          // focus on that input if it exists

          inputs.eq(i + 1)

          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 

          .focus();



          // Exit the loop now that focus has been called on "next" input

          break

        }

      } 

    }


The idea here is to select the next input element based on the order that they occur in the DOM, rather than to select the next input element based on adjacent siblings to the input that "enter" is pressed. This solution also corrects a few minor errors in your code's selector syntax. Here's a working demo:






$("input").keydown(function(event){

 

    if (event.keyCode === 13) {

     

      var inputs = $('input:enabled');

      

      for(var i = 0; i < inputs.length; i++) {

        if( $(inputs).eq(i).is( $(this) ) ) {

          inputs.eq(i + 1)

          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 

          .focus()

          break

        }

      } 

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>








share|improve this answer























  • Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
    – Lakmal Premaratne
    Nov 11 at 6:46










  • @LakmalPremaratne hey you're welcome! Hope this is of some help to you in your learning :-)
    – Dacre Denny
    Nov 11 at 6:48
















0














If I understand your question correctly then one solution to this problem is to update your keydown() handler like so:



  if (event.keyCode === 13) {



      // Get all enabled inputs in the document

      var inputs = $('input:enabled');



      // Iterate all inputs, searching for the index of the "next" input to "this"

      for(var i = 0; i < inputs.length; i++) {



        // If the "global" index of "this" input is found

        if( $(inputs).eq(i).is( $(this) ) ) {



          // Then select the "next" input by incrementing the index, and call

          // focus on that input if it exists

          inputs.eq(i + 1)

          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 

          .focus();



          // Exit the loop now that focus has been called on "next" input

          break

        }

      } 

    }


The idea here is to select the next input element based on the order that they occur in the DOM, rather than to select the next input element based on adjacent siblings to the input that "enter" is pressed. This solution also corrects a few minor errors in your code's selector syntax. Here's a working demo:






$("input").keydown(function(event){

 

    if (event.keyCode === 13) {

     

      var inputs = $('input:enabled');

      

      for(var i = 0; i < inputs.length; i++) {

        if( $(inputs).eq(i).is( $(this) ) ) {

          inputs.eq(i + 1)

          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 

          .focus()

          break

        }

      } 

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>








share|improve this answer























  • Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
    – Lakmal Premaratne
    Nov 11 at 6:46










  • @LakmalPremaratne hey you're welcome! Hope this is of some help to you in your learning :-)
    – Dacre Denny
    Nov 11 at 6:48














0












0








0






If I understand your question correctly then one solution to this problem is to update your keydown() handler like so:



  if (event.keyCode === 13) {



      // Get all enabled inputs in the document

      var inputs = $('input:enabled');



      // Iterate all inputs, searching for the index of the "next" input to "this"

      for(var i = 0; i < inputs.length; i++) {



        // If the "global" index of "this" input is found

        if( $(inputs).eq(i).is( $(this) ) ) {



          // Then select the "next" input by incrementing the index, and call

          // focus on that input if it exists

          inputs.eq(i + 1)

          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 

          .focus();



          // Exit the loop now that focus has been called on "next" input

          break

        }

      } 

    }


The idea here is to select the next input element based on the order that they occur in the DOM, rather than to select the next input element based on adjacent siblings to the input that "enter" is pressed. This solution also corrects a few minor errors in your code's selector syntax. Here's a working demo:






$("input").keydown(function(event){

 

    if (event.keyCode === 13) {

     

      var inputs = $('input:enabled');

      

      for(var i = 0; i < inputs.length; i++) {

        if( $(inputs).eq(i).is( $(this) ) ) {

          inputs.eq(i + 1)

          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 

          .focus()

          break

        }

      } 

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>








share|improve this answer














If I understand your question correctly then one solution to this problem is to update your keydown() handler like so:



  if (event.keyCode === 13) {



      // Get all enabled inputs in the document

      var inputs = $('input:enabled');



      // Iterate all inputs, searching for the index of the "next" input to "this"

      for(var i = 0; i < inputs.length; i++) {



        // If the "global" index of "this" input is found

        if( $(inputs).eq(i).is( $(this) ) ) {



          // Then select the "next" input by incrementing the index, and call

          // focus on that input if it exists

          inputs.eq(i + 1)

          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 

          .focus();



          // Exit the loop now that focus has been called on "next" input

          break

        }

      } 

    }


The idea here is to select the next input element based on the order that they occur in the DOM, rather than to select the next input element based on adjacent siblings to the input that "enter" is pressed. This solution also corrects a few minor errors in your code's selector syntax. Here's a working demo:






$("input").keydown(function(event){

 

    if (event.keyCode === 13) {

     

      var inputs = $('input:enabled');

      

      for(var i = 0; i < inputs.length; i++) {

        if( $(inputs).eq(i).is( $(this) ) ) {

          inputs.eq(i + 1)

          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 

          .focus()

          break

        }

      } 

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>








$("input").keydown(function(event){

 

    if (event.keyCode === 13) {

     

      var inputs = $('input:enabled');

      

      for(var i = 0; i < inputs.length; i++) {

        if( $(inputs).eq(i).is( $(this) ) ) {

          inputs.eq(i + 1)

          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 

          .focus()

          break

        }

      } 

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>





$("input").keydown(function(event){

 

    if (event.keyCode === 13) {

     

      var inputs = $('input:enabled');

      

      for(var i = 0; i < inputs.length; i++) {

        if( $(inputs).eq(i).is( $(this) ) ) {

          inputs.eq(i + 1)

          .css({ border : '1px solid red' }) // Added to help visualise focus, remove this line 

          .focus()

          break

        }

      } 

    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>



    <div class="row">

     <div class="col-3 pr-0">

      <div class="form-group">

       <label for="txtBarcode">Barcode</label>

       <input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

     <div class="col-7 pl-2 pr-0">

      <div class="form-group">

       <label for="txtPartDesc">Description</label>

       <input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

     <div class="col-2 pl-2">

      <div class="form-group">

       <label for="txtUom">UoM</label>

       <input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>

      </div>

     </div>

    </div>

    <div class="row">

     <div class="col-4 pr-0">

      <div class="form-group">

       <label for="txtQuantity">Quantity</label>

       <input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">

      </div>

     </div>

    </div>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 11 at 21:53

























answered Nov 11 at 6:38









Dacre Denny

9,9264929




9,9264929












  • Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
    – Lakmal Premaratne
    Nov 11 at 6:46










  • @LakmalPremaratne hey you're welcome! Hope this is of some help to you in your learning :-)
    – Dacre Denny
    Nov 11 at 6:48


















  • Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
    – Lakmal Premaratne
    Nov 11 at 6:46










  • @LakmalPremaratne hey you're welcome! Hope this is of some help to you in your learning :-)
    – Dacre Denny
    Nov 11 at 6:48
















Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
– Lakmal Premaratne
Nov 11 at 6:46




Thank you for your response. @Patrick's answer worked 'Out of the box' . Anyway I am studying your input as well since I am new to js world (Y)
– Lakmal Premaratne
Nov 11 at 6:46












@LakmalPremaratne hey you're welcome! Hope this is of some help to you in your learning :-)
– Dacre Denny
Nov 11 at 6:48




@LakmalPremaratne hey you're welcome! Hope this is of some help to you in your learning :-)
– Dacre Denny
Nov 11 at 6:48


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53246365%2fset-focus-to-the-next-input-element%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

這個網誌中的熱門文章

Academy of Television Arts & Sciences

圖片
American television organization Academy of Television Arts & Sciences Founded 1946 ; 73 years ago  ( 1946 ) Location North Hollywood, California, United States Area served Television industry Product Emmy Awards Key people Frank Scherma ( Chairman and CEO ) Website televisionacademy.com [redirects to emmys.com , official website of the Emmys and the Television Academy The Academy of Television Arts & Sciences ( ATAS ), also colloquially known as the Television Academy , is a professional honorary organization dedicated to the advancement of the television industry in the United States. Founded in 1946, the organization presents the Primetime Emmy Awards, an annual ceremony honoring achievement in U.S. primetime television. Contents 1 History 2 Emmy Award 3 Publications and programs 4 Current governance 4.1 Board of Governors 5 Television Academy honors 5.1 1st Annual (2008) 5.2 2nd Annual (2009)...
閱讀完整內容

L'Équipe

圖片
For other uses, see Équipe (disambiguation). L'Équipe The front page of L'Équipe on 4 July 2011 Type Daily newspaper Format Tabloid Owner(s) Éditions Philippe Amaury Editor François Morinière Editor-in-chief Fabrice Jouhaud Founded 1946 Language French Headquarters Boulogne-Billancourt ISSN 0153-1069 Website www.lequipe.fr L'Équipe ( pronounced  [lekip] , French for "the team") is a French nationwide daily newspaper devoted to sport, owned by Éditions Philippe Amaury. The paper is noted for coverage of association football , rugby, motorsport and cycling. Its predecessor was L'Auto , a general sports paper whose name reflected not any narrow interest but the excitement of the time in car racing. L'Auto originated the Tour de France cycling stage race in 1903 as a circulation booster. The race leader's yellow jersey (French: maillot jaune ) was instituted in 1919, probably to reflect the dist...
閱讀完整內容

1995 France bombings

圖片
This article is a rough translation from French . It may have been generated by a computer or by a translator without dual proficiency. Please help to enhance the translation. The original article is under "français" in the "languages" sidebar. See this article's entry on Pages needing translation into English for discussion. 1995 France bombings Part of Algerian Civil War (spillover) Plaque commemorating the victims of the Saint-Michel station bombing on 25 July 1995 Location Paris and Lyon, France Date 25 July 1995  ( 1995-07-25 ) – 17 October 1995  ( 1995-10-17 ) Weapons Improvised explosive devices, school bombing Deaths 8 Non-fatal injuries 157 Perpetrator Armed Islamic Group Motive To induce the French government to withdraw support from the Algerian government during the Algerian Civil War The 1995 bombings in France were carried out by the Armed Islamic Group (GIA), who were broadening the Alger...
閱讀完整內容