Comments: Add yours

1. On December 20th, 2005 at 4:24 am Froggie said:

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

2. On January 5th, 2006 at 2:34 pm Neil Crosby said:

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.

3. On January 5th, 2006 at 2:40 pm Stuart said:

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

4. On January 18th, 2006 at 12:49 am OBCENEIKON said:

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

5. On January 25th, 2006 at 4:54 pm Kalpesh Modi said:

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.

6. On February 7th, 2006 at 1:24 pm Stuart Colville said:

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

7. On March 3rd, 2006 at 4:20 pm sean said:

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;
}

8. On March 8th, 2006 at 8:21 am Carl Vondrick said:

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)

9. On March 28th, 2006 at 3:02 pm Leo Hendry said:

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.

10. On March 28th, 2006 at 9:19 pm Jim said:

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

11. On March 28th, 2006 at 9:49 pm Stuart Colville said:

Leo and Jim: Glad it was useful!

12. On June 14th, 2006 at 4:43 pm Nismi said:

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.

13. On June 27th, 2006 at 5:53 pm Katherine said:

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.

14. On July 5th, 2006 at 1:32 pm Einsichten » Spaß mit der Enter-Taste said:

[...] Erkenntnisse von Hier Technorati Tags: Crap, IE, Submit Einsortiert nach Web 0.1 [...]

15. On July 7th, 2006 at 9:24 am Sam said:

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.

16. On July 7th, 2006 at 9:49 am Stuart Colville said:

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

17. On July 8th, 2006 at 12:18 pm James Graham said:

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!

18. On July 18th, 2006 at 4:46 pm Rob said:

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

19. On August 7th, 2006 at 3:22 pm mikosan said:

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.

20. On August 22nd, 2006 at 5:18 pm brian said:

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!

21. On September 27th, 2006 at 4:04 pm Ruel said:

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

22. On October 4th, 2006 at 6:53 pm Caesar said:

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.

23. On October 27th, 2006 at 3:32 pm Byte-Dompteur » mehrere submits in einem Form said:

[...] Gefunden habe ich diese Lösung hier:  http://muffinresearch.co.uk/archives/2005/12/08/fun-with-multiple-submit-buttons/#comment-166 [...]

24. On February 15th, 2007 at 11:49 am frex65 said:

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.

25. On March 26th, 2007 at 11:28 am Mehrere Submit-Buttons – hangy.de‽ said:

[...] sieht so aus als sei dieses Problem durchaus altbekannt und als ob es dafür keine richtige Problemlösung gebe, da es nicht falsch sein kann, weil es [...]

26. On April 20th, 2007 at 2:40 am Gbm said:

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;
}

27. On June 14th, 2007 at 11:43 pm Karim said:

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.

28. On June 14th, 2007 at 11:54 pm Karim said:

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.

29. On July 2nd, 2007 at 12:49 pm mrtvy josef said:

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

30. On August 29th, 2007 at 11:21 pm Chris said:

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.