AJAX Form Submission in jQuery Mobile

Question

I'm trying to submit a simple login form via ajax on a jQuery Mobile site but I'm having trouble.

It seems that when I submit the form (via POST), the form parameters are getting added to the url. Not only that, they erase the anchored page I was at before form submission.

For example, I'm on page localhost:8080/myapp/#sign_up

Then I submit the form causing the url to become: localhost:8080/myapp/[email protected]&pass=pass

So if I hit validation errors and click a 'back' button, I don't get returned back to the #sign_up page.

Any ideas?

Velamen

Answer 1

If you handle form submission with a custom submit event handler you can handle validation on the same page:

//bind an event handler to the submit event for your login form
$(document).on('submit', '#form_id', function (e) {

    //cache the form element for use in this function
    var $this = $(this);

    //prevent the default submission of the form
    e.preventDefault();

    //run an AJAX post request to your server-side script, $this.serialize() is the data from your form being added to the request
    $.post($this.attr('action'), $this.serialize(), function (responseData) {

        //in here you can analyze the output from your server-side script (responseData) and validate the user's login without leaving the page
    });
});

To stop jQuery Mobile from running its own AJAX sumbission of your form put this on your form tag:

<form data-ajax="false" action="...">

Choroid

Any feedback on the negative vote would be appreciated. I just like to know what I'm doing wrong :) – Choroid

so would I ;-) the only thing maybe is that 'live' is now deprecated and you should use 'on' instead. maybe even 'on / off' in sequence to prevent duplicated events : stackoverflow.com/questions/9067259 – Valona

Answer 2

Jaspers solution above worked for me! The only thing I had to adjust was replacing .live with .submit (.live is now deprecated). So now its like this:

$('#form_id').submit(function (e) {

    //cache the form element for use in this function
    var $this = $(this);

    //prevent the default submission of the form
    e.preventDefault();

    //run an AJAX post request to your server-side script, $this.serialize() is the data from your form being added to the request
    $.post($this.attr('action'), $this.serialize(), function (responseData) {

        //in here you can analyze the output from your server-side script (responseData) and validate the user's login without leaving the page
    });
});

Fronia

A note on this, if the form is pulled into the DOM as an external page, this must be run after that occurs. Which is why I would suggest using a delegated event handler, so the event handler will catch the event even if the form is added to the DOM after the initial page load. – Choroid

Answer 3

If you want to submit a form and not use ajax (which is default) you must add 'data-ajax="false"' to your form string:

 <form data-ajax="false" action="test.php" method="POST">

Calve

This is part of the answer above, mind if I ask why you re-posted it? – Choroid