form submit jQuery mobile

2
votes

I've gotten it into my head that mobile applications don't like form submits the same way html does, so I thought I'd better have a sanity check on Stackoverflow.

For example, instead of having <input type="submit"...>, it looks like I should now use <a data-role="button"...>

Q: Can I continue to use <input type="submit"...> for mobile applications?

The reason why I ask is because the action page has some logic, such as:

<cfif structKeyExists(form,"Save")>
2
coldfusionjquery-mobile
wondering just the same thing and have not found a nice implementation/tutorial with programmatically submitting a JQM form. - frequent
Interesting. Here is the docs on Form submission: jquerymobile.com/demos/1.0rc1/docs/forms/forms-sample.html and button type docs are here: jquerymobile.com/demos/1.0rc1/docs/buttons/buttons-types.html to my understanding you look to be fine using input type submit. Also there are some tidbits in the release notes as well: jquerymobile.com/blog/2011/09/29/jquery-mobile-1-0rc1-released - Phill Pafford

2 Answers

1
votes

jQuery Mobile, at least as of this writing, by default submits forms via AJAX using the method specified on the form being submitted. POST submissions will still be posted to the server in the background, so ColdFusion will still see the form variables that are passed in as usual. When a response is generated, jQuery Mobile will take the response and transition the view over to whatever HTML was returned. In my own testing you can continue to use a normal submit button as well. If you want a standard submission rather than an AJAX submission, add data-ajax="false" to the form tag.

1
votes

If you want to programatically submit a form, set the data-ajax attribute for the form to false and then set an event handler for the submit event for the form:

<form data-ajax=false></form>

$(function () {
    $('form').bind('submit', function (event) {
        event.preventDefault();
        $.post('path/to/server.file', $(this).serialize(), function (data) {
            alert('Server Response: ' + data);
        });
    });
});