How to set tab order for html from horizontally?

Question

I have a multiple form, contains 2 input boxes and a submit button. i have given tab order for each input. i have tab index for each input type. tab order is moving vertically than horizontally . it should go to first input box , second input box and then submit button.

Below is the code.

<form class="monitorForm" >
  <div class="monitorAdd">
    textbox1  <input type="text" tabindex="1">
    textbox2  <input type="text" tabindex="2">
        <input type="button" tabindex="3" value="submit">
  </div>
</form>
<form class="monitorForm">
    <div class="monitorAdd">
        textbox1        <input type="text" tabindex="1">
        textbox2        <input type="text" tabindex="2">
        <input type="button" tabindex="3" value="submit">
    </div>
</form>
<form  class="monitorForm">
    <div class="monitorAdd">
          textbox1        <input type="text" tabindex="1">
          textbox2        <input type="text" tabindex="2">
         <input type="button" tabindex="3" value="submit">
    </div>
</form>

below is the js code

$('form').each(function(){

    var list  = $(this).find('*[tabindex]').sort(function(a,b){ return a.tabIndex <      b.tabIndex ? -1 : 1; }),
    first = list.first();
    list.last().on('keydown', function(e){
        if( e.keyCode === 9 ) {
            first.focus();
            return false;
         }
    });
});

its a dynamic form which is coming in loop and contains many fields. i want to give tab order for only 3 input fields.

http://jsfiddle.net/mWLtp/5/

Please help me in solving this issue. Thank in advance.

Answer 1

jQuery Way DEMO

var index = 1;

$("form input").each(function () {
    $(this).attr("tabindex", index);
    index++;
});

HTML WAY Well You Can Directly Give Tabindex DEMO

<form class="monitorForm" >
    <div class="monitorAdd">
        textbox1        <input type="text" tabindex="1">
        textbox2        <input type="text" tabindex="2">
        <input type="button" tabindex="3" value="submit">
     </div>
</form>
<form class="monitorForm">
    <div class="monitorAdd">
        textbox1        <input type="text" tabindex="4">
        textbox2        <input type="text" tabindex="5">
        <input type="button" tabindex="6" value="submit">
    </div>
</form>
<form  class="monitorForm">
    <div class="monitorAdd">
          textbox1        <input type="text" tabindex="7">
          textbox2        <input type="text" tabindex="8">
         <input type="button" tabindex="9" value="submit">
    </div>
</form>

well, if you dont define a tabindex attribute it defaults to horizontal, you dont need any tabindex or jquery

Answer 2

set distinct tab index. for your case set it in 1 t0 9.


Like

<form class="monitorForm" >
 <div class="monitorAdd">
    textbox1        <input type="text" tabindex="1">
    textbox2        <input type="text" tabindex="2">
    <input type="button" tabindex="3" value="submit">
 </div>
</form>
<form class="monitorForm">
<div class="monitorAdd">
    textbox1        <input type="text" tabindex="4">
    textbox2        <input type="text" tabindex="5">
    <input type="button" tabindex="6" value="submit">
</div> 
</form>
<form  class="monitorForm">
<div class="monitorAdd">
      textbox1        <input type="text" tabindex="7">
      textbox2        <input type="text" tabindex="8">
     <input type="button" tabindex="9" value="submit">
 </div>
 </form>

Answer 3

Give to individual tabindex value,instead of override your tabindex value.

JSFIDDLE DEMO

Answer 4

All the tabindex=1 will be taken in order from top to bottom, no matter if you have placed them in single <div> or different. Then will come the turn of tabindex=2 .

Your Solution:

Change the tabindex like 1,2,3,4,5,6.. instead of 1,2,3,1,2,3,...

Hope this helps. :)