I am newbie using jquery mobile with php. I have a little problem on my login form with submit button after I submited, it head to ‘home.php’ page but url didn’t go to home.php too. (it’s still /login.php) . how can i fix this?
<?php
include 'core/config.init.php'; //include all sql connect,function etc.
if(logged_in() === true)
{
header('Location: home.php');
}
if(empty($_POST) === false)
{
$check_user = true;
$check_pass = true;
$username = $_POST['username'];
$password = $_POST['password'];
if(empty($username) === true || empty($password) === true)
{
$error = 'You need to enter username and password!';
$check_user = false;
$check_pass = false;
}
else if(user_exists($username) === false )
{
$check_user = false;
}
$login = login($username, $password);
if($login === false)
{
$error = 'Username/password is incorrect!';
$check_pass = false;
}
else
{
setcookie("username", "$username", time()+1720000);
header('Location: home.php');
}
}
//print_r($error);
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="core/css/login.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="core/jquery/jquery-latest.js"></script>
<script src="core/jquery/login.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div id = "header-text-area">
<span id= "header-text">Login</span>
</div>
<div data-role="content" style="padding: 15px">
<form action="login.php" method="POST">
<div data-role="fieldcontain" class="ui-hide-label">
<input name="username" id="textinput1" placeholder="Username" value="test" type="text" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<input name="password" id="textinput2" placeholder="Password" value="test" type="password" />
</div>
<div id = "submit-area">
<input type="submit" data-theme="b" value="Submit" id = "sub1"/>
</div>
</form>
</div>
</div>
</body>
You need to add
data-ajax="false"to the form tag. This will submit the form to your action URL without using Ajax navigation that is built into jquery mobile. Also, you should use the full URL in the form action. (jquery mobile sometimes gets confused)