Set focus to the next input element

up vote
1
down vote

favorite

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.

asked Nov 11 at 6:22

Lakmal Premaratne

310311

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

add a comment |

up vote
1
down vote

favorite

<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.

asked Nov 11 at 6:22

Lakmal Premaratne

310311

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

add a comment |

up vote
1
down vote

favorite

<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.

asked Nov 11 at 6:22

Lakmal Premaratne

310311

<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

asked Nov 11 at 6:22

Lakmal Premaratne

310311

asked Nov 11 at 6:22

Lakmal Premaratne

310311

asked Nov 11 at 6:22

Lakmal Premaratne

310311

asked Nov 11 at 6:22

Lakmal Premaratne

310311

asked Nov 11 at 6:22

Lakmal Premaratne

310311

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

add a comment |

.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

add a comment |

3 Answers
3

active

oldest

votes

up vote
3
down vote

accepted

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:

Get a jQuery object of all the enabled inputs
```
var enabledInputs = $("input:enabled");
```

Get the index of the current input in that jQuery object using index()
```
var idx = enabledInputs.index(this);
```

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>

answered Nov 11 at 6:38

Patrick Evans

31.7k54370

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

add a comment |

up vote
0
down vote

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>

answered Nov 11 at 6:33

CertainPerformance

69k143453

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

add a comment |

up vote
0
down vote

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>

edited Nov 11 at 21:53

answered Nov 11 at 6:38

Dacre Denny

8,8724729

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

add a comment |

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',
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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

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

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
3
down vote

accepted

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:

Get a jQuery object of all the enabled inputs
```
var enabledInputs = $("input:enabled");
```

Get the index of the current input in that jQuery object using index()
```
var idx = enabledInputs.index(this);
```

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>

answered Nov 11 at 6:38

Patrick Evans

31.7k54370

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

add a comment |

up vote
3
down vote

accepted

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:

Get a jQuery object of all the enabled inputs
```
var enabledInputs = $("input:enabled");
```

Get the index of the current input in that jQuery object using index()
```
var idx = enabledInputs.index(this);
```

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>

answered Nov 11 at 6:38

Patrick Evans

31.7k54370

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

add a comment |

up vote
3
down vote

accepted

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:

Get a jQuery object of all the enabled inputs
```
var enabledInputs = $("input:enabled");
```

Get the index of the current input in that jQuery object using index()
```
var idx = enabledInputs.index(this);
```

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>

answered Nov 11 at 6:38

Patrick Evans

31.7k54370

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:

Get a jQuery object of all the enabled inputs
```
var enabledInputs = $("input:enabled");
```

Get the index of the current input in that jQuery object using index()
```
var idx = enabledInputs.index(this);
```

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>

answered Nov 11 at 6:38

Patrick Evans

31.7k54370

answered Nov 11 at 6:38

Patrick Evans

31.7k54370

answered Nov 11 at 6:38

Patrick Evans

31.7k54370

answered Nov 11 at 6:38

Patrick Evans

31.7k54370

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

add a comment |

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

add a comment |

up vote
0
down vote

$(":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>

answered Nov 11 at 6:33

CertainPerformance

69k143453

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

add a comment |

up vote
0
down vote

$(":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>

answered Nov 11 at 6:33

CertainPerformance

69k143453

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

add a comment |

up vote
0
down vote

$(":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>

answered Nov 11 at 6:33

CertainPerformance

69k143453

$(":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>

answered Nov 11 at 6:33

CertainPerformance

69k143453

answered Nov 11 at 6:33

CertainPerformance

69k143453

answered Nov 11 at 6:33

CertainPerformance

69k143453

answered Nov 11 at 6:33

CertainPerformance

69k143453

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

add a comment |

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

add a comment |

up vote
0
down vote

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

        }

      } 

    }

$("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>

edited Nov 11 at 21:53

answered Nov 11 at 6:38

Dacre Denny

8,8724729

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

add a comment |

up vote
0
down vote

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

        }

      } 

    }

$("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>

edited Nov 11 at 21:53

answered Nov 11 at 6:38

Dacre Denny

8,8724729

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

add a comment |

up vote
0
down vote

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

        }

      } 

    }

$("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>

edited Nov 11 at 21:53

answered Nov 11 at 6:38

Dacre Denny

8,8724729

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

        }

      } 

    }

$("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>

edited Nov 11 at 21:53

answered Nov 11 at 6:38

Dacre Denny

8,8724729

edited Nov 11 at 21:53

answered Nov 11 at 6:38

Dacre Denny

8,8724729

answered Nov 11 at 6:38

Dacre Denny

8,8724729

answered Nov 11 at 6:38

Dacre Denny

8,8724729

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

add a comment |

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

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky