Move to next enabled text filed on keypress event using jquery

Question

I have a form containing many text fields which are generated dynamically some of the filed are disabled. I want that when user presses enter key in any textbox I move focus to next enabled textbox. currently I am using following script to stop submitting the form on key press.

Javascript

 <script type="text/javascript" >
        $(document).keypress(function (e) {
            if (e.which == 13 && e.target.tagName != 'TEXTAREA') {
              //Need to set focus to next active text field here.
                return false;
            }
        });

    </script>

Html

<table class='workshoptable grdstyle' cellPadding='5px;' style='border:1px solid #cccccc' id='wrokshoptable_12'>
  <tr class='grdHeader'>
    <th style='width:140px;'>
      Duration
    </th>
    <th title='Location for this workshop'>
      Location
    </th>
    <th>
      Students
    </th>
    <th>
      Grade
    </th>
    <th>
      Teacher
    </th>
  </tr>
  <tr class='trAlternate'>
    <td style='vertical-align:middle' title='Workshop duration'>
      <div>
        12: 00 - 13: 30
      </div>
      <input type='hidden' class='workshopDuration' value='12:00 - 13:30' />
      < input type='hidden' class='templateName' value='Body Builders' />
      < input type='hidden' class='templateMaxCount' value='60.0000000000' />
    </td>
    <td>
      <input type='text' title='Enter the location for this workshop' class='textbox SchoolShowlocation' size='200' style='width:135px;' maxLength='200' disabled='disabled'>
      <div class='locationValidationDiv text-danger'>
      </div>
    </td>
    <td>
      <input type='text' style='width:70px;' title='Enter number of studens attending who will attend this workshop' class='onlyNumberInput textbox NumStudent' name='2565243f-67ab-e411-9434-00155d00cd05' size='4' maxLength='4'
      disabled='disabled'>
      <div class='NoOfStudentsValidationDiv text-danger'>
      </div>

    </td>
    <td>
      <input type='text' class='textbox WorkshopGrade' title='Enter Grade attending this workshop' style='width:80px;' size='200' maxLength='200' disabled='disabled'>
      <div class='gradeValidationDiv text-danger'>
      </div>

    </td>
    <td>
      <input type='text' class='textbox SchoolTeacherName' title='Enter name of the teacher who will be with the students' size='200' maxLength='200' style='width:135px;' disabled='disabled'>
      <div class='teacherValidationDiv text-danger'>
      </div>

    </td>
  </tr>

</table>

I have tried many solutions but not working for me.

Answer 1

This will do your work.

$(document).keypress(function (e) {
   
            if (e.which == 13 && e.target.tagName != 'TEXTAREA') {
              
              var txt = $(e.target);
             var allOther= $("input[type=text]:not([disabled])");
              var index = jQuery.inArray(txt[0], allOther);
             var next= $(allOther[index+1]);
              if(next) next.focus();
              debugger;
              //Need to set focus to next active text field here.
                return false;
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <input type="text">
  <br><br>
   <input type="text">
  <br><br>
   <input type="text" disabled>
  <br><br>
   <input type="text">
  <br><br>
   <input type="text" disabled>
  <br><br>
   <input type="text">