Question

I have a PHP-generated form that is used as an invoicing interface. Users work their way through the form by pressing tab. I need to rotate the tab key through the form until they finalize the invoicing process.

For example, with this form:

 <form>

 <input type = "text" name="a" tabindex=1>
 <input type = "text" name="b" tabindex=2>
 <input type = "text" name="c" tabindex=3>
 <input type = "text" name="d" tabindex=4>
 <input type = "text" name="e" tabindex=5> 
 <input type = "text" name="f" tabindex=6>
 <input type = "button" name="g" tabindex=7>

 <input type = "submit" name="h" tabindex=8>

 </form>

I need to move the tab index from 1 to 7, and then tab should move them back to field a. It needs to rotate and I need to move cursor to h when I press ESC.

Example –

TAB Key moved the cursor from a->b->c->d->e->f->g->a->b->……->g

ESC Key Just move the Cursor to h

How can I do this in HTML or javascript?

Answer 1

I used id instead of names. Guess this helps:

 <form>
     <input type = "text" id="a" tabindex=1/>
     <input type = "text" id="b" tabindex=2/>
     <input type = "text" id="c" tabindex=3/>
     <input type = "text" id="d" tabindex=4/>
     <input type = "text" id="e" tabindex=5/> 
     <input type = "text" id="f" tabindex=6/>
     <input type = "button" id="g" value="next" tabindex=7/>
     <input type = "submit" id="h" value="ok" tabindex=8/>
 </form>
    <script type="text/javascript">
    $('input').keydown(function(event){
        if(event.keyCode == 9 && $(event.target).is('#g') ){
            $('#a').focus(); 
            event.preventDefault();
        }
        else if (event.keyCode == 27){
            $('#h').focus(); 
            event.preventDefault();
        }
    });
    </script>