jQuery Mobile form input not triggering the form submit event

Update - 25 June 2012

I have pinpointed exactly what was causing this and it was not related to jQuery or jQuery Mobile. In the CSS, we were using the HTML5 Boilerplate resets and the rule input[type="submit"] contained a "width:auto;".

The width:auto; was not in the latest available boilerplate release (3.0.2) so this was either in an older version or added by myself or one of the designers.  I do not know why this rule is interacting in such a way, but I have verified it in a minimum test case.

This really through me for a loop and sent me on a massive off-road adventure, so I thought I'd post it in case somebody else out there is having this issue.

Basically, I had a form with a standard <input type="submit" /> tag. The page was including jQuery 1.7.2 and jQuery Mobile 1.1.0, but the problem persisted when switching to various combinations that included jQuery 1.6.4 and jQuery Mobile 1.0.1.

When clicking on the submit button nothing happened. No submit event was fired on the form. Frustrating!

Removing jQuery Mobile allowed the event to fire, so it was definitely something going on in there.

After digging around in the source js and firebug, I found it was wrapping the input in some divs and spans to allow for it to be styled up.  Fairly standard issue for a plugin really. Firebug yielded the code below:

<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="null" data-iconpos="null" data-theme="c" data-inline="false" data-mini="false" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-fullsize ui-btn-block" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Submit Form</span>
</span>
<input type="submit" id="submit_button" name="submit_button" value="Submit Form" class="ui-btn-hidden" aria-disabled="false"/>
</div>

Also, jQuery Mobile is intercepting all clicks on the document (line 3553 in the uncompressed 1.1.0 code, for those interested) and passing them through a function to check whether to load it with ajax or just pass it through to the default handler.  In my case, I didn't want an ajax submit, so I gave the form an attribute of data-ajax="false".

For some reason, the click wasn't getting passed through to the underlying <input> element. Maybe someone can shed some light on this for me because I'm at a loss as to why it's not getting through.

Anyway, enough talking around the issue; This is the code snippet that I was able to get working.  It assumes the id on the form element is "form_id" and the name attribute of the submit input is "submit_button".

$( document ).bind( "click", function( event ) {
	if ((event.target.nextSibling != null && event.target.nextSibling.name == 'submit_button') || (event.target.parentElement.nextSibling != null && event.target.parentElement.nextSibling.name == 'submit_button'))
		$("#form_id").submit();
	return true;
});

Basically it's checking for a click on either the span holding the value of the input element or a click on the span that's the direct parent and then forcing the form submit handler to fire.

I have no idea why I was running into this issue on this site. I have other sites using jQuery Mobile and the forms submit just fine without any heavy-handed intervention.  I even tried copying the code from a working form on another site into this and it still wouldn't submit.  Very strange indeed.  

I'm probably missing some simple, small difference between the sites that would resolve this issue more elegantly, but for now, the above code works for my purposes. Perhaps it will help save you some time and get you back from your own off-road adventure.

8 Comments

drkhdr #1 2368 days ago
Hi Carl, thanks for sharing!

I have experienced this before already for a non-jQuery Mobile site, and now I ran into the exact same issue as you did using jQuery Mobile.

When I encountered this issue the first time, I could link it to upgrading from jQuery 1.7.1 to jQuery 1.7.2. So what I did was reverting back to jQuery 1.7.1, and the issue was gone (since I used Rail, I fixed jQuery to 1.7.1 by putting "gem 'jquery-rails', '2.0.1'" into the Rails gemfile).

However, with jQuery 1.7.1 and jQuery Mobile 1.1.0 the issue you describe persists.

So this is indeed *VERY STRANGE* - I'd be very interested in case you or anyone else has found the root cause in the meantime...

Best, Dirk
drkhdr #2 2367 days ago
FYI, not exactly sure this the exact issue you've had:
https://github.com/jquery/jquery-mobile/issues/4583
Carl Champagne #3 2365 days ago
Thanks for stopping by Dirk,

I tried your issue submission and it is unfortunately not what I'm running into. I was already in HTML. I tried XHTML for giggles to see if I was having the issue in reverse, and no surprises, it didn't work.

The fix has served it's purpose well enough so I haven't done any more digging since this post.

Perhaps I need to come up with a minimum test case to reproduce and submit it to the issue tracker

- Carl
Dave #4 2360 days ago
Thanks for sharing! Same situation here. Glad I am not alone
Glenn Widener #5 2328 days ago
What I think is happening:

jQMs visible wrapper element copies all the classes applied to the actual input element, to which jQM and app css styling is applied. If you give the button a top or left margin, or possibly in your case width:auto, it causes the position of the actual input element to shift within the wrapper element, so that clicks in the top and left of the visible element miss the actual submit element! A terrific way to produce what seems like a random failure in the field.

You can see this in the attached debug screenshot when adding a top and left margin, with the actual submit element geometry highlighted. Indeed, clicks in the bottom of the visible button work.

A fix is:

$("#createButton").parent().click(function() {$("#createButton").click()});

Thus catching a click on the wrapper element and forwarding it to the actual submit element.

Clearly a bad design in jQM. If they are going to "move" decorations to a wrapper element, they need to remove them from the wrappered element. There are many complaints about jQM submit not firing on the web, and I suspect that many are this problem.
Carl #6 2328 days ago
Thanks Glenn, that makes a lot of sense. I added a border to the input in firebug and found that the non-submitting button can actually be clicked on the left side of the button where the rounded corners are.

There's something about the way that the wrapper is interacting that causes the auto width to extend only to that left-side rounded corner.

Also, your fix for passing the click through to the input is far more elegant than mine. Thanks
Micronewton #7 2011 days ago
Thanks a lot ! I didn't understand what happened and I've found your solution...So great
Angelo de Salves #8 2003 days ago
I had the same problem and I solved it placing the attribute "data-ajax = 'false'" in the form

Post a comment


(optional, will not be displayed)
If you can see this field, please leave it blank, or your comment will not be submitted
(optional)

Photo of Carl

About Carl

Web Programmer. Shutterbug. New Father. Enjoying life in New Zealand.

Read more

Facebook  LinkedIn  Twitter

Recent Activity

 

Photo Tags

Tags

Archives

Utilities