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.

My HTML is very dynamic sometimes it will contain some divs between text fields and sometime not. there also can be disabled text fields between 2 enabled textfields. — Muhammad Saifullah, May 05 '15 at 12:12
Without seeing it, or at least an approximation, it's going to be a complete guess as to how to find the next element to focus on. — Rory McCrossan, May 05 '15 at 12:13
You can have a look at [this](http://stackoverflow.com/q/290535/4202224) question in SO too — empiric, May 05 '15 at 12:28

score 3 · Accepted Answer · answered May 05 '15 at 12:21

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

Many Thanks it worked. I do not know why my question is down graded. wan't it clear? — Muhammad Saifullah, May 05 '15 at 12:26
@MuhammadSaifullah - It was clear to me :) can't say about others. Some want it to crystal clear — Puneet, May 05 '15 at 12:27

Move to next enabled text filed on keypress event using jquery

1 Answers1