jQuery mobile ajax login form authentication
- by Jakub Zak
I know i already asked simillar question, but now when I work with jQuery Mobile I can't figure it out. So I have this form:
<div data-role="page" data-theme="a" id="login_page">
<div data-role="header" data-position="fixed">
<h1>****</h1>
</div>
<div data-role="content">
<form id="login_form" method="POST" data-ajax="false">
<label for="basic">Username:</label>
<input type="text" name="name" id="username" value=""/>
<label for="basic">Password:</label>
<input type="password" name="password" id="password" value=""/>
<input type="submit" value="Login" id="login" name="login"/>
</form>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar"></div>
</div>
</div>
And I need to submit Username and Password to php script, where php replies and send "success" or "failed". Here is php:
<?php
session_start();
$username = $_POST["name"];
$password = $_POST["password"];
include('mysql_connection.php');
mysql_select_db("jzperson_imesUsers", $con);
$res1 = mysql_query("SELECT * FROM temp_login WHERE username='$username' AND password='$password'");
$count=mysql_num_rows($res1);
if($count==1){
echo "success";
}else{
echo "failed";
}
?>
And to do all this I want to use this script:
$(document).ready(function() {
$("form").submit(function(){
$.mobile.showPageLoadingMsg();
$.ajax({
url: "http://imes.jzpersonal.com/login_control.php",
type: "POST",
dataType: "jsonp",
jsonp: "jsoncallback",
data: $("form#login_form").serialize(),
success: function( response ){
$.mobile.changePage( "http://imes.jzpersonal.com/user_panel.html");
}
});
return false;
});
});
But I can't make it work, I know I must have mistakes in there, I just can't find them, or better way to do it. Thank you in advance for any help.
