Skip to content
This repository

Form buttons no longer submit forms in Internet Explorer 8 with Beta 1 #1927

Closed
begmandev opened this Issue June 24, 2011 · 17 comments

10 participants

begmandev Ghislain Seguin Kin Blas John Bender Todd Parker Adam Biggs ernieracer Nathan Vonnahme noiselesslark n0v1
begmandev

It appears the form buttons no longer appear to be submitting forms in Internet Explorer with Beta 1. If you go to the form element gallery in the documentation, clicking the cancel/submit buttons on the form have no effect. However, they seem to work fine in other browsers/devices. The only way I've been able to get form submissions to work with Internet Explorer in the demos and in my own application is to press the Enter key from one of the form fields instead of clicking the form buttons.

Todd Parker

Hmmm, I just tested this is IE9 latest on Windows 7 and the submit buttons worked on both the form gallery and submitting forms example pages. What OS and IE version?

begmandev

I'm running IE8 on Windows XP. Running in both compatibility and non-compatibility mode yielded the same results for me.

begmandev

Just to make sure it wasn't this individual machine, I validated on the form element gallery from three different machines all running IE8 on Windows XP and they all exhibited this same behavior. No action when clicking the cancel/submit buttons, only when you press the enter key from one of the form elements.

Todd Parker

We'll take a look at this very soon. So this is probably an issue with IE 7 & 8?

begmandev

Thanks. I can't really say for sure if it's an issue with IE 7 because I don't have a readily accessible environment with IE 7 to verify. However, I can definitely say it seems to be an issue on all of the IE 8/XP installations that I've tried (I've tried on five different IE 8 installations now). The form buttons seem to work fine in FF, Chrome, iOS, and Android so the scope seems to be limited to IE 8 (and maybe earlier???) from the testing I've done.

Adam Biggs

@begmandev

You should try this tool. It's a little buggy, but sure beats setting up a VM for every version of IE:

http://www.my-debugbar.com/wiki/IETester/HomePage

ernieracer

Hey guys,

just gave it a try on an old XP box with IE8, and I noticed that the buttons do work, except that you have to click exactly on the text of the input value. Can you confirm begmandev?

For some weird reason this also happens in IE8 comp mode, but not in IE9 comp mode, which I thought that they both switch back to the same IE7 engine.

It's still a bug though.

Thanks,
Daniel

Nathan Vonnahme
n8v commented July 14, 2011

Yes, one of my users found this bug too. The text of the button is clickable, but when you click the icon or the rest of the button, it animates a click without submitting the form. It affects IE8 in both standards and IE7 compatibility mode (IE9 is OK; I don't have an IE7 handy). It affects <input type="submit"> and <button> elements, but not <a data-role="button"> elements, which work fine.

I've put up a demo at http://jsfiddle.net/kNx2P/7/ using latest/jquery.mobile.min.js .

This is a live page (using beta1) where the issue was found.
https://fairbanks.bannerhealth.com/cpoe_ordersets/caresets/92884896

Todd Parker

Can you test this with the latest build? We added a zoom:1 hack that might help here, not sure. IE is so buggy.

begmandev

I still experience the same results with the latest build. I tried in my own application as well as the test form gallery at http://jquerymobile.com/test/

Clicking on the text of the button in IE submits the form while clicking anywhere else on the button has no effect. FWIW, I don't disagree that IE is pretty buggy but this worked like a champ in the alpha 4.1 version. Not being critical, just stating that the beta 1 release was the first where I noticed this problem.

Nathan Vonnahme
n8v commented July 20, 2011

That jsfiddle I made points to the latest build, and it still behaves the same in IE8. I'm sorry, I wish I could fix/patch instead of just describe the bug...

Nathan Vonnahme
n8v commented August 08, 2011

Same behavior in beta2. I updated the jsfiddle demonstrating the issue to use jQuery 1.6.2.

noiselesslark

I also have this issue in IE8. Changed the button to <a data-role=button> and now it works. Thanks!

Mat Marquis Wilto referenced this issue from a commit in Wilto/jquery-mobile September 23, 2011
Mat Marquis Potentially addresses #1927 — Using “filter” for opacity was causing …
…strange issues in IE, making all but the text on submit inputs click-proof. Bears further testing, if someone wouldn’t mind taking a look.
078d317
Todd Parker

The commit above should fix this issue. We can re-open if anyone is still seeing this in latest:
Jquerymobile.com/test

Todd Parker toddparker closed this September 23, 2011
Nathan Vonnahme

Yay I confirmed it works in both IE7 and IE8. THANK YOU @Wilto and @toddparker.

Timmy Willison timmywil referenced this issue from a commit September 23, 2011
Mat Marquis Potentially addresses #1927 — Using “filter” for opacity was causing …
…strange issues in IE, making all but the text on submit inputs click-proof. Bears further testing, if someone wouldn’t mind taking a look.
f351f86
n0v1

.ui-btn-hidden { ... line-height: 999px; } causes an vertical scroll bar to appear in FF9 if a button at the end of the content div is disabled / enabled. Using text-indent: -9999px; instead should fix this. I also see this behaviour in http://jsfiddle.net/kNx2P/9/.

Todd Parker

@n0v1 - I made this tweak, thanks.

Julien Guyomard jguyomard referenced this issue from a commit in jguyomard/jquery-mobile January 19, 2012
Todd Parker Switched from line-height to text-indent to accessibly hide buttons. …
…Fixes #1927

Was causing an vertical scroll bar to appear in FF9 if a button at the
end of the content div is disabled / enabled. Changed '''line-height:
999px''' to '''text-indent: -9999px'''. Thanks n0v1!
b0d261e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.