I am developing a phonegap app, and I am trying to submit my sign up form and send the data into MySQL through ajax, then after submit I wanna pop up a page to inform the user whether it is successes. I can send the data and get a popup page but it seems like I have something wrong to get the dialogY page which will show on the below.
This is my html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height
<link some css here….>
<script src="js/jquery-1.10.2.js" ></script>
<script src="js/jquery.mobile-1.4.0.js" ></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script src="js/signup.js"></script>
<script>
function onBodyLoad(){
document.addEventListener("deviceready",onDeviceReady,false);
}
</script>
<title>DTSB System</title>
</head>
continue
<body onload="onBodyLoad()">
<div data-role="page" id="signinpage" >
<div data-role="header" data-theme="b">
<h1>Sign in</h1>
</div>
<div data-role="content" data-theme="a">
<form name="signinform" id="signinform" align="center" method="post" action="home.html" data-ajax="false">
<div data-role="fieldcontain">
<input type="text" name="fusername1" id="fusername1" placeholder="Username" class="required">
</div>
<div data-role="fieldcontain">
<input type="password" name="fpasswd1" id="fpasswd1" placeholder="Password" class="required">
</div>
<input type="submit" name="signinsubmit" data-inline="true" data-icon="arrow-u-r" data-transition="flip" value="Sign in">
<a href="#signuppage" data-role="button" data-inline="true" data-icon="edit" data-transition="slidedown">Sign up</a>
</form>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>IZUMEI</h1>
</div>
</div>
<div data-role="page" id="signuppage" data-theme="a">
<div data-role="header" data-theme="b">
<h1>Sign up</h1>
</div>
<div data-role="content" >
<form name="signupform" id="signupform" align="center">
<div data-role="fieldcontain">
<label for="fusername2">Username:</label>
<input type="text" name="fusername2" id="fusername2" class="required" minlength="3">
</div>
<div data-role="fieldcontain">
<label for="fpasswd2">Password:</label>
<input type="password" name="fpasswd2" id="fpasswd2" class="required" minlength="5">
</div>
<div data-role="fieldcontain">
<label for="fconfirmpasswd">Confirm Password:</label>
<input type="password" name="fconfirmpasswd" id="fconfirmpasswd" class="required passmatch" minlength="5">
</div>
<div data-role="fieldcontain">
<label for="femail">E-mail:</label>
<input type="email" name="femail" id="femail" class="required">
</div>
<input id="register" type="submit" data-inline="true" value="Registration">
<a href="#signinpage" data-role="button" data-inline="true" data-icon="delete" data-iconpos="right" data-transition="slideup">Cancel</a>
</form>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>IZUMEI</h1>
</div>
</div>
<div data-role="page" id="dialogY" data-theme="a" data-dialog="true">
<div data-role="header" data-theme="b">
<h1>Successfully sign up</h1>
</div>
<div data-role="content">
<p align="center">Congradulations!Welcome to be one of us!</p>
</div>
<div data-role="footer" data-theme="a" align="center" data-position="fixed">
<a href="#signinpage" type="button">Sign in now</a>
</div>
</div>
<div data-role="page" id="dialogN" data-theme="a" data-dialog="true" data-rel="back">
<div data-role="header" data-theme="b">
<h1>Sign up failed</h1>
</div>
<div data-role="content">
<p align="center">Sorry, something wrong when sign up, <span>please try again later</span></p>
</div>
</div>
</body>
</html>
This is my php file
$username=mysql_real_escape_string($_POST['fusername2']);
$password=sha1($_POST['fpasswd2']);
$email=mysql_real_escape_string($_POST['femail']);
$sql = "INSERT INTO users (user_name, user_pass, user_email)";
$sql .= "VALUES('$username','$password','$email')";
$exist = "SELECT * FROM users WHERE user_name= '". $username . "'";
$query_result = mysql_query($exist, $con);
if(mysql_num_rows($query_result) == 0) {
if(isset($username)&& isset($password) && isset($email)){
if(mysql_query($sql, $con)){
echo "Insert success!";
}else{
die ('Error: ' . mysql_error());
}
}else{
die ('Error: There are empty fields needed to be filled' . mysql_error());
}
}else{
die ('Error: User already exist' . mysql_error());
}
mysql_close($con);
?>
This is my js file
$(document).on("pageshow", "#signuppage", function() {
$.validator.addMethod("passmatch", function(value) {
return value == $("#fpasswd2").val();
}, 'Confirmation password must match.');
});
$(document).ready(function(){
$('#signupform').validate();
$('#signupform').submit(function(event){
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type:'POST',
data: formData,
url:'http://localhost/doctor/insert_info.php',
cache: false ,
success: function(){
$.mobile.changePage("#dialogY");
}
error: function(){
$.mobile.changePage("#dialogN");
}
});
return false;
});
});
I have tried a lot of methods but I still can't get the dialogY page, It seems like I can not get the success feedback, even if I submit the right data. When I run these codes in emulator it works, but on safari it fails. Is there any problem with my code?
