CODEWITHSUNDEEP
html
SLM
SLM

Reputation: 849

Problem with HTML tabindex

Following is a sample code of which I’m working of. When navigating through ENTER button form submit invokes “Cancel” action though it’s tab index is after the “Next” button.

E.g. 

Field01 <ENTER>  Field02 <ENTER>  Field03 <ENTER>   >>>>>  Form submits with Cancel action  
Field01 <TAB>    Field02 <TAB>    Field03 <TAB>     >>>>>  Next button is focused

Changing the order of “submit” buttons in HTML mark-up would help to prevent the invocation of “Cancel” button by default. But I need to keep “Cancel” button in left side & “Next” button in right side.

    <form  method="post" action="/SVRWeb/ActionController" name="frmMain">
        <div>
            <h1>Some information</h1>
            <label>Field 01</label>
            <input type="text" tabindex="0" name="field01" value""  size="15" />
            <label>Field 02</label>
            <input type="text" tabindex="1" name="field02" value""  size="15" />
            <label>Field 03</label>
            <input type="text" tabindex="2" name="field03" value""  size="15" />
        </div>
        <input type="submit" tabindex="4" name="Action.User.Init" value="Cancel" />
        <input type="submit" tabindex="3" name="Action.User.Form2" value="Next"/>
    </form>

Upvotes: 0

Views: 1786

Answers (2)

BalusC
BalusC

Reputation: 1108537

The enter key fires the firstnext type="submit" element in the form, regardless of the tabindex. There are two ways to go around this:

  1. Use JS to click the particular button when enter key is pressed:

    <form onkeypress="if (event.keyCode == 13) document.getElementById('next').click();">

    This however get nasty when you've a <textarea> in the form for which you of course want to keep its default behaviour with enter key.

  2. Put buttons in same container element with the Next button first and use CSS to swap them.

    .next { float: right; }
.cancel { float: left; }

Upvotes: 1

The Muffin Man
The Muffin Man

Reputation: 20004

I think it is because it see's the Cancel and Next button as the same thing. They are both of type Submit. So when you press enter it finds the first submit button. I would change the cancel type to maybe reset? Then use javascript/jQuery to do a redirect when you click the cancel button.

There may be a better way.

Upvotes: 0

Related Questions