jquery mobile ajax form,php - jQuery Mobile: How to correctly submit form data - Stack Overflow

Intro

This example was created using jQuery Mobile 1.2. If you want to see recent example then take a look at this article or this more complex one. You will find 2 working examples explained in great details. If you have more questions ask them in the article comments section.

Form submitting is a constant jQuery Mobile problem.

There are few ways this can be achieved. I will list few of them.

Example 1 :

This is the best possible solution in case you are using phonegap application and you don't want to directly access a server side php. This is an correct solution if you want to create an phonegap iOS app.

index.html

jQM Complex Demo

#login-button {

margin-top: 30px;

}

Login Page

Enter your username:

Enter your password:

Page footer

check.php :

//$action = $_REQUEST['action']; // We dont need action for this tutorial, but in a complex code you need a way to determine ajax action nature

//$formData = json_decode($_REQUEST['formData']); // Decode JSON object into readable PHP object

//$username = $formData->{'username'}; // Get username from object

//$password = $formData->{'password'}; // Get password from object

// Lets say everything is in order

echo "Username = ";

?>

index.js :

$(document).on('pagebeforeshow', '#login', function(){

$(document).on('click', '#submit', function() { // catch the form's submit event

if($('#username').val().length > 0 && $('#password').val().length > 0){

// Send data to server through ajax call

// action is functionality we want to call and outputJSON is our data

$.ajax({url: 'check.php',

data: {action : 'login', formData : $('#check-user').serialize()}, // Convert a form to a JSON string representation

type: 'post',

async: true,

beforeSend: function() {

// This callback function will trigger before data is sent

$.mobile.showPageLoadingMsg(true); // This will show ajax spinner

},

complete: function() {

// This callback function will trigger on data sent/received complete

$.mobile.hidePageLoadingMsg(); // This will hide ajax spinner

},

success: function (result) {

resultObject.formSubmitionResult = result;

$.mobile.changePage("#second");

},

error: function (request,error) {

// This callback function will trigger on unsuccessful action

alert('Network error has occurred please try again!');

}

});

} else {

alert('Please fill all nececery fields');

}

return false; // cancel original event to prevent form submitting

});

});

$(document).on('pagebeforeshow', '#second', function(){

$('#second [data-role="content"]').append('This is a result of form submition: ' + resultObject.formSubmitionResult);

});

var resultObject = {

formSubmitionResult : null

}