Muffinresearch Labs by Stuart Colville

Fun with multiple submit buttons | 35 Comments

Posted in Browsers on 8th December 2005, 12:58 am by

In a project that I am working on at the moment I have several forms that need to have more than one submit button. It’s a process set out across several pages with a form on each page. In order to navigate between the pages I decided I would like to use submits for both the “Next” and the “Back” buttons. With Safari enforcing the button lookfrom OSX it’s preferable to use submits otherwise there will be inconsistency if you use a mixture of styled links and submit buttons.

The plan was to use two submit buttons and depending on which one is pressed, a different action takes place. To discern which button had been pressed I was going to look at the value of the buttons to tell them apart. Sounds simple and straight forward but in reality there some issues to overcome:

1. Variations when using Enter to submit in IE

I remembered that my colleague Tim had mentioned a while back that he had experienced an issue with IE not sending the name/value pair for the submit button when Enter was pressed after filling in a field in the form.

Tim knocked up a quick test script so that we could see what happens with IE. After testing we found that IE doesn’t send the name/value pair for the submit button if you press enter without focussing on the submit button first. However after some further testing of my own I found that this behaviour only happens if one text input is used. If you use two or more text inputs, the name/value pair of the submit button highest in the source is sent (more on that below). From my tests this seems to be the same for IE 5-6.0 and IE 5.2 Mac.

To allow for this ‘feature’ you either need to make sure you always use two text fields (the second can be hidden using CSS) or Tim’s suggestion was to use a switch statement in the script that processes the form that has a default action if no submit value is received with the rest of the fields sent.

I also noticed further curiosities in other browsers when using enter to submit a form: (Bear in mind you can’t submit using enter if focused on a textarea for obvious reasons!)

  1. Opera (v8.51 at time of testing) doesn’t allow submissions using enter if the focus is not on a text field or the submit itself.
  2. Firefox (v1.5 at time of testing) doesn’t allow submissions using enter if the focus is on a select
  3. Safari (v2.02 at time of testing) doesn’t allow submissions using enter if the focus is on a radio button (enter activates the radio button)

2. The order of submits in the source

If you fill in a field and hit ‘enter’ you will see that the name/value pair of the first submit button (as it appears in the markup) is sent (excluding the special case with IE above). This is a logical thing to do though it does mean when using multiple submit buttons you do need to worry about where in markup the submit buttons are placed.

In my example I want ‘Next’ to be the default ‘action’ so I have to make sure that the ‘Next’ button is higher in the source than the ‘Back’ button. For this to work I have used CSS to position the ‘Next’ button. When viewed with author stylesheet off you will see that the ‘Next’ button appears higher as I have used a <br /> to separate the buttons onto separate lines. This is a small point but to see the ‘Next’ and ‘Back’ buttons the wrong way round is confusing.

Try the examples

To view the test scripts click on one of the links below:

This certainly isn’t the most interesting post in the world but if you worry about these small details then you won’t put your users in a position where an unexpected action takes place when dealing with forms with more than one submit button.

Post Tools

  • Froggie

    I just wanted to let you know how I’ve overcome the ordering problem with the back/next buttons in the past. I wrapped the buttons in a div with id="formSubmitButtons", and used the following CSS rules:

    .formSubmitButtons {
  direction: rtl;
  float:left;
  }
.formSubmitButtons input {
  direction: ltr;
  float: none;
  }

    This makes the first input submit button (Next) appear last on the page while still being the default button (when pressing enter). This also works well with multiple submit buttons, eg. back | reset | cancel | next

  • http://www.workingwith.me.uk/blog/ Neil Crosby

    It might not have been the most interesting subject in the world for most people, but it was certainly a post I was happy to read today. I’m working on a project at work at the moment which also uses multiple submit buttons on a page, for pretty much the same reasons that you are. While I’ve not noticed anything crazy-wrong yet – your post should come in useful if I do.

    Incidentally, I didn’t actually come here looking for multiple submit-button goodness – I was just flicking around the 9rules homepage – that was an unexpected bonus.

  • http://www.muffinresearch.co.uk Stuart

    @Neil: Glad you liked it. When I’d finished writing it I suddenly thought that reading it might be akin to watching paint dry!

  • http://plurpage.com OBCENEIKON

    I ran into this problem myself, all I did was add a hidden element named IEFix and gave it a value of True…tested to see if that POST value was set and viola

  • Kalpesh Modi

    You can create a new CSS style for input button to be hidden.

    .hiddenBtn{
    width: 0px;
    height: 0px;
}

    Now on the form you need to provide the Next button twice. The Next button needs to be the first and last in the whole sequence of buttons. In the above example, you need to have the Next(with hiddenBtn style), Back, and then again the Next button. The first Next button will not be visible to the user but will be triggered when the user hits the Enter key.

  • http://www.muffinresearch.co.uk Stuart Colville

    @Kalpesh: Interesting workaround, though where possible it would be preferable to avoid having to add an extra button.

  • sean

    You’ll need to apply the following styles to your hidden button in order for it to work properly in both IE and Firefox. 

    /* This is for IE */
.hiddenBtn {
  width: 0px;
  height: 0px;
}

/* This is for Firefox since IE ignores it */
.hiddenBtn[class] {
  display: none;
}
  • Carl Vondrick

    My solution to the problem was to just set the positioning on the extra button to absolute and place it well off the canvas.

    Example:

    Works like a charm (not tested on IE yet, but it should work fine. Too lazy to boot into Windows)

  • Leo Hendry

    I have just spent a couple of hours trying to find out why IE sometimes fails to post the submit button when pressing Return/Enter, so I am very grateful for your summary of the situation.

  • Jim

    Thanks a lot! I’ve been trying to figure out for a couple of days (on and off) why one form of my app wasn’t working in IE.

    Very helpful!! ;-)

  • http://muffinresearch.co.uk Stuart Colville

    Leo and Jim: Glad it was useful!

  • Nismi

    sean & Kalpesh Modi,

    thank you for the code, i did as you said included submit button with width 0 and height 0 thru CSS and it worked. thank you so much.

    nismi.

  • Katherine

    Thanks! That was exactly what I needed :o )

    A hidden text field and button later and the form is finally behaving as I expect in IE and Firefox :o ) Yay! :o ) Silly IE!!

    Kat.

  • Pingback: Einsichten » Spaß mit der Enter-Taste

  • Sam

    Nice to see that other people are having the same issues.

    I’ve seen a few solutions so far and none of them work in IE (6).

    I’ve set my default submit button at the top of the form with:
    display: none;
    visibility: hidden;
    width: 0;
    (all separately I hasten to add, not in the same class)
    All work in FF but none in IE.

    Incedentally setting width: 2px; doesn’t woek in IE either, or 3px and at 3 you can just see the button to click on it, I had to go up to 5px before there was enough of a button for IE to realise it was there and use it.

    This is starting to annoy me now… Oh well the search for an IE work around goes on.

    If anyone comes accross a working solution I would be glad to hear it.

  • http://muffinresearch.co.uk Stuart Colville

    @Sam: If you have an example I’d be interested to see it as this would help explain exactly what you are trying to do.

  • James Graham

    Hi, I used the hidden button trick, worked a treat. Had a problem with the article’s solution where the button would move out of position if the window was resized. Probably my fault, but it’s all good.

    Thanks all!

  • http://rob.unend.com Rob

    thank you, thank you.. this post saved me soo much time and frustration.

  • http://www.kmit.sk mikosan

    Hi,

    to fix IE 6.0 tricky behaviour use button which is located in div with zero height.

    Anything that has display: none IE does not see somehow…

    m.

  • http://www.briantucker.net brian

    i’m having the same problem as sam. really frustrating!

    apparently ie6 is determining which button is the first VISIBILE button on the page and using it as the default. hiding the button with width, height, display, position (absolute, relative, fixed), z-index, etc all resulted in it being overlooked as the first and thus default button. i applied all the same css style to hide the div containing the button (without any on the button itself) and either it didn’t hide the button properly or ie6 would still overlook the button. apparently microsoft is so sure they know what button should be default on my form they deliberately coded away any possible css workaround. why can’t they just give submit buttons a default flag???

    i guess i’ll have to handle the enter key using javascript attached to the onkeyup event on each textfield. the same code microsoft should have written in the first place!

  • http://ambatchdotcom.ruelbermudez.com Ruel

    just had almost similar prob. my form only has 1 textfield as this is the only input field that needs to be entered. other data are fixed so i used a hidden field. problem occurs when u press the enter key after inputting something in the textfield. upon reading this very helpful post, i got an idea. i redesigned my form so that i placed another textfield and echo a value of one of my hidden fields… something like that. it worked!!!

  • Caesar

    what a wonderful post. I am looking for it, and I found it. Great work.

    It is so glad to see that I have thought about both solutions that this post and comments mentioned. I have tried to set the button’s display to none, but it won’t work for IE. To set the button’s size to 0 is really a smart way, but I like the writer’s method better.

  • Pingback: Byte-Dompteur » mehrere submits in einem Form

  • http://www.rnib.org.uk/ frex65

    Adding an extra hidden button is a bad idea since a blind person using a screenreader will “hear” the extra button and probably be confused by it. And since there’s already a work-around, you don’t need that extra button after all.

  • Pingback: Mehrere Submit-Buttons – hangy.de‽

  • Gbm

    did anyone mention a fix for the IE? if not then i’ve used this in my style sheet… seems to work in both browsers fine… (sorry, too lazy to go over the thread again to see if there has been a fix mentioned) :-)

    .hiddenBtn {
    width: 0px;
    height: 0px;
    }

    * html #hiddenBtn {
    display: none;
    }

  • Karim

    Comment 26 won’t work in IE7 I believe since IE7 follows the rules better:
    .hiddenBtn {
    width: 0px;
    height: 0px;
    }

    * html #hiddenBtn {
    display: none;
    }

    Neither will comment 7 work in IE7:
    /* This is for IE */
    .hiddenBtn {
    width: 0px;
    height: 0px;
    }

    /* This is for Firefox since IE ignores it */
    .hiddenBtn[class] {
    display: none;
    }

    Both the star hack and advanced selector hack are fixed. IE7 does the right thing with display:none, but that also makes the button have no existence–it doesn’t count as far as pressing enter from the form. The zero size trick makes it disappear in IE7 still and it still will be activated as we want it to when you press enter…however, Firefox will still show a little one or two boxy thing with size 0.

  • Karim

    Following on to my comment just made…I did find one apparent solution:

    .hidden
    {
    width:0px;
    height:0px;
    border-width:0px;
    }

    …

    This worked for me in IE6, IE7, and Firefox 2.0. Page is XHTML Strict, if that makes a difference. The button is invisible, but pressing enter from the form it’s in activates this button as long as it’s the first button in the markup within the form.

  • mrtvy josef

    Thank you very much, number 1 solved the problem I encountered. I stumbled over that strange behaviour of IE several times, trying to fix it various ways, nothing helped. I’ve never thought it can be so simple :-)
    Josef

  • Chris

    I found that the following CSS is required for Safari:

    .hiddenSubmit
    {
    width:0px;
    height:0px;
    border-width:0px;
    background: none;
    }

    Otherwise a little gray box will be present.

  • Pingback: Mehrere Submit-Buttons in einem Formular - XHTMLforum

  • http://bassistance.de Jörn Zaefferer

    Thanks, helped me solve a very similar problem. And that more then 3 years after your initial post…

  • Zac

    Still a valid article, thanks!

  • Ing

    @Froggie (1st comment): Thank you! exactly what I needed, “direction” works like a charm on my 4 (submit)buttons (cancel|previous|next|save), still having the default enter on “save”.

  • Karsten

    Thanks a lot!
    Solved a long existing problem and “saved my day”.

GNU screen: open tab in current working directory|(1)

A nice trick for having screen open a new tab in the same directory as the one you’re currently in. To use it add it to your .screenrc

# Open new window in current dir.
bind c stuff "screen -X chdir \$PWD;screen^M"
bind ^c stuff "screen -X chdir \$PWD;screen^M"

Hat tip: mteckert on SuperUser.com

Ubuntu: add-apt-repository: command not found|(2)

When you’re using a minimal Ubuntu install if you find the ‘add-apt-repository’ command is missing (it’s useful for adding PPAs and other repositories), then simply run:

sudo apt-get install python-software-properties

Photos on Flickr

© Copyright 2004-12 Stuart Colville, all rights reserved. May contain traces of Muffin. Powered by WordPress. Hosting by Slicehost.com This page was baked in 0.542s.