Jump to content

Setting tabindex for an image button


ukscotth

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.