Setting tabindex for an image button

[ukscotth]

Hi,

 

Im having troubles setting up the tab order for a small form. When I click in the first input box and press tab it goes to the next input box but when I press tab again it skips the submit button.

 

Any ideas ?

 

Heres the code :

 

 <form action="quote_part1.php" method="post">
      <div align="center">
        <p align="center" class="style1"> <br />
          <span class="style3">Pick-up Location : <span class="style5">e.g Gatwick Airport </span></span></p>
        <p>
          <select name="from" id="from" class="editable-select" tabindex="1" >
            <option></option>
            <option>Gatwick Airport Terminal 1</option>
            <option>Gatwick Airport Terminal 2</option>
            <option>Gatwick Airport Terminal 3</option>
            <option>Heathrow Airport Terminal 1</option>
            <option>Luton Airport</option>
          </select>
          <br />
        </p>
        <p align="center" class="style4">Drop-off Location : <span class="style5">e.g Bournemouth </span> </p>
        <p>
          <select name="to" tabindex="2" id="to" class="editable-select" onKeyPress="return submitenter(this,event)" >
            <option></option>
            <option>Gatwick Airport Terminal 1</option>
            <option>Gatwick Airport Terminal 2</option>
            <option>Gatwick Airport Terminal 3</option>
            <option>Heathrow Airport Terminal 1</option>
            <option>Luton Airport</option>
          </select>
        </p>
        <p> </p>
        <p> <img src="images/quote_button.png" tabindex="3" OnMouseOver="this.style.cursor='pointer';"  onclick="document.forms[0].submit()" />   </p>
      </div>
    </form>

 

Many thanks,

 

Scott

[cssfreakie]

although this works with newer browsers, IE8 and down wont understand the tab index on an image.

manual says: The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.

 

Instead you could use an anchor element around the image.

<a href="" tabindex="3"><img alt="" src="images/quote_button.png"  OnMouseOver="this.style.cursor='pointer';"  onclick="document.forms[0].submit()" /></a>

 

Or even better just use a submit button or an anchor element (they can have background images...) and result is less redundant.

 

p.s. I added an alt= tag for your image, you forgot it i assume..

[ukscotth]

Hey, thanks very much for the reply. Just pasted your code and for some reason it still skips the image when using tab. Would it be easy to convert it into a proper button ? Sorry Im a bit of a newbie if you hadnt already guessed lol

[cssfreakie]

Would it be easy to convert it into a proper button ? Sorry Im a bit of a newbie if you hadnt already guessed lol

 

it would be even easier (apart from the background which you have to set yourself)

 

just add:

 

<input class="button" type="submit" name="submit" value="submit values" tabindex="3"/>

 

than in css you could do something like:

 

.button{
     display:inline-block;
     width:50px;
     height:50px;
     background: url(http://i55.tinypic.com/dzw1zn.png) no-repeat;
     cursor:pointer;
     /* remove default text */
     line-height: 0;
     font-size: 0;
     border:0;
}

 

 

By using javascript for something as vital as submitting a form, your limiting your audience.

 

P.s. You might want to - instead of asking how- just try stuff, and post it if it doesn't work that way you learn by trying