My simple app contains two pages.
1.Login page
2.Page One (Displays if login is successful)
Login form gets user input and verify the user by sending data to check.php page.
login page and pageone page
<body>
<div data-role="page" id="login" >
<div data-role="header" data-position="fixed">
<h1>Login</h1>
</div>
<div data-role="main" class="ui-content">
<form id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<div data-role="fieldcontain">
<label for="password">Enter your password:</label>
<input type="password" value="" name="password" id="password"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit">
</fieldset>
</form>
</div>
<div data-role="footer" data-position="fixed" >
<h1>IIL 2014</h1>
</div>
</div>
<div data-role="page" id="pageone" class="my-page">
<div data-role="header" data-position="fixed">
<a href="#" id="user" data role="button"></a>
<h1>Dashboard</h1>
<a href="#" id="refreshdata" data role="button">Refresh</a>
</div>
<div data-role="main" class="ui-content">
</div>
<div data-role="footer" data-position="fixed" >
<h1>IIL 2014</h1>
</div>
</div>
</body>
java script function
<script>
$(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: 'http://iilsfa.br0s.info/Dashboard/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("#pageone");
},
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', '#pageone', function(){
$('#user').append('This is a result of form submition: ' + resultObject.formSubmitionResult);
});
var resultObject = {
formSubmitionResult : null
}
</script>
check.php
<?php
echo "Username =xxxxxx ";
?>
My problem is javascript function is not sending or receiving any any data from the server.When i enter values to 2 text boxes and click on submit button,nothing happens.Please help me to solve this. here is the example which i following jQuery Mobile: How to correctly submit form data
