Enter key acts like tab key doesn't work on tables

Question

I have an enter key that acts as a tab. It works on my other textbox, but after i reached the table data, it doesn't work anymore. My target is how can I go to the next textbox after I press the "enter" key on my table data?

HTML:

<table class="table table-bordered" border="1" class="classtable" id="applicanttable">
     <tr>
                <th>#</th>
                <th>B#</th>
                <th>W#</th>
                <th>W #</th>
                <th>Action</th>
             </tr>
     
            <tbody class="appendtablee" id="wew">
            </tbody>

SCRIPT:

    //Enter key that acts as a tab key.
    $('input').keypress(function(e){
        if(e.which==13){ 
            $("[tabindex='"+(parseInt($(this).attr("tabindex"))+1)+"']").focus();
            e.preventDefault();
        }
    });   

This function creates a tabindex for every textbox.

$(function() {
    var tabindex = 1;
    $('input,select').each(function() {
        if (this.type != "hidden") {
            var $input = $(this);
            $input.attr("tabindex", tabindex);
            tabindex++;
        }
    });
});

Answer 1

The logic seems fine. Only issue seems to be with form submit.

By default your input elements are part of form and form submits and page refreshes in two cases.

1. When we click on a submit button.
2. And when a user clicks on the Enter Key.

If this is the issue then you would need to use

e.preventDefault()

on the form submit event. This will prevent the form to be submitted on the click of enter (But you will need to make few adjustments in code, since it will prevent the form submission even on the click of submit button,in which case you need to check add one extra check).

Something like below:

function submitForm(e) {
   if(e.which===13) {
      e.preventDefault(); // This will prevent the default refresh on click of Enter key
   }

   // Continue with your form submission logic
}