How to move to the next input using javascript?

Question

I set up a form in HTML but I wanted when a user pressed the ENTER key it went to the next field.

Example, the first field has to fill with the name, when the person pressed ENTER it would go to the bottom option (user) and so on.

<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Nome:
      <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12">
      <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" required="required" type="text">
   </div>
</div>
<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Usuário:
     <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input type="email" id="email" name="email" required="required" class="form-control col-md-7 col-xs-12">
   </div>
</div>
<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Confirmar usuário:
     <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input type="email" id="email2" name="confirm_email" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12">
   </div>
</div>
<div class="item form-group">
   <label for="password" class="control-label col-md-3">Senha:</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input id="password" type="password" name="password" data-validate-length="6,8" class="form-control col-md-7 col-xs-12" required="required">
   </div>
</div>
<div class="item form-group">
   <label for="password2" class="control-label col-md-3 col-sm-3 col-xs-12">Confirmar senha:</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input id="password2" type="password" name="password2" data-validate-linked="password" class="form-control col-md-7 col-xs-12" required="required">
   </div>
</div>

How can I do that?

Answer 1

You can use this code using Javascript only without additional libraries.

In HTML, you add the attribute tabindex:

<input type="text" tabindex="1">
<input type="text" tabindex="2">
<input type="text" tabindex="3">

Javascript:

var inputs = document.querySelectorAll("input,select");
for (var i = 0 ; i < inputs.length; i++) {
   inputs[i].addEventListener("keypress", function(e){
      if (e.which == 13) {
         e.preventDefault();
         var nextInput = document.querySelectorAll('[tabIndex="' + (this.tabIndex + 1) + '"]');
         if (nextInput.length === 0) {
            nextInput = document.querySelectorAll('[tabIndex="1"]');
         }
         nextInput[0].focus();
      }
   })
}

By pressing ENTER o focus will go to the next tabindex

Source: https://stackoverflow.com/a/50558555/194717

Answer 2

I think that would be my darling. Hugs!

$(document).ready(function () {
    
    $('#name').focus();
    
    $(document).find('input').keypress(function (e) {
        if (e.which == 13) {//Enter key pressed
            e.preventDefault();
            
            $(this).closest('.item')
            .next().first()
            .find('input')
            .focus();

        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Nome:
                        <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name"
                          required="required" type="text">
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Usuário:
                        <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="email" id="email" name="email" required="required" class="form-control col-md-7 col-xs-12">
                      </div>
                    </div>
                    <div class="item form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Confirmar usuário:
                        <span class="required">*</span>
                      </label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input type="email" id="email2" name="confirm_email" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12">
                      </div>
                    </div>
                    
                    <div class="item form-group">
                      <label for="password" class="control-label col-md-3">Senha:</label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="password" type="password" name="password" data-validate-length="6,8" class="form-control col-md-7 col-xs-12" required="required">
                      </div>
                    </div>
                    <div class="item form-group">
                      <label for="password2" class="control-label col-md-3 col-sm-3 col-xs-12">Confirmar senha:</label>
                      <div class="col-md-6 col-sm-6 col-xs-12">
                        <input id="password2" type="password" name="password2" data-validate-linked="password" class="form-control col-md-7 col-xs-12"
                          required="required">
                      </div>
                    </div>

Answer 3

In pure Javascript without changes in HTML, you can do this way:

var els = document.querySelectorAll("input.form-control");
for (var x=0; x<els.length; x++) {
   els[x].addEventListener("keypress", function(e){
      var k = e.which || e.keyCode;
      if(k == 13){
         e.preventDefault();
         var p = this.parentNode.parentNode.nextElementSibling.querySelector("input.form-control");
         if(p) p.focus();
      }
   });
}

<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Nome:
      <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12">
      <input id="name" class="form-control col-md-7 col-xs-12" data-validate-length-range="6" data-validate-words="2" name="name" required="required" type="text">
   </div>
</div>
<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Usuário:
     <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input type="email" id="email" name="email" required="required" class="form-control col-md-7 col-xs-12">
   </div>
</div>
<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Confirmar usuário:
     <span class="required">*</span>
   </label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input type="email" id="email2" name="confirm_email" data-validate-linked="email" required="required" class="form-control col-md-7 col-xs-12">
   </div>
</div>
<div class="item form-group">
   <label for="password" class="control-label col-md-3">Senha:</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input id="password" type="password" name="password" data-validate-length="6,8" class="form-control col-md-7 col-xs-12" required="required">
   </div>
</div>
<div class="item form-group">
   <label for="password2" class="control-label col-md-3 col-sm-3 col-xs-12">Confirmar senha:</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
     <input id="password2" type="password" name="password2" data-validate-linked="password" class="form-control col-md-7 col-xs-12" required="required">
   </div>
</div>