What im trying to do here is create a login system using jquery mobile and then upon successful login i want to display the users information on a profile page. Im aware of some of the functions i need to use for this although as im using phonegap i need to use AJAX to pass thr data across which is the part that is really confusing me. If anyone can help me with this then that would be great, ive been struggling with the for weeks now.
Below is my HTML Code. I want to pass the user to page 2 with their profile information upon sucessful login.
<!-------------- First page for form ----------->
<div data-role="page" id="home">
<!-------------- First page header ----------->
<div data-role="header">
<h1>Login in</h1>
</div>
<!-------------- First page main content ----------->
<div data-role="main" class="ui-content" id="login"/>
<form method="post" action="#profile" data-ajax="false"/>
<label for="email">Email: <span>*</span></label>
<input type="email" id="email" name="email" placeholder="example@domain.com"/>
<label for="password">Password : <span>*</span></label>
<input type="password" name="password" id="password" placeholder="********"/>
<input type="submit" data-inline="true" id="login" value="Submit" data-theme="b"/>
</form>
</div>
<!-------------- First page footer ----------->
<div data-role="footer" id="footer">
<h1>...</h1>
</div>
<!-------------------------------------------------------------
End of First page
-------------------------------------------------------------->
<!-------------- Second page ----------->
<div data-role="page" id="profile">
<!-------------- Second page header ----------->
<div data-role="header">
<h1>Profile</h1>
</div>
<!-------------- Second page main content ----------->
<!-------------- Second page footer ----------->
<div data-role="footer">
<h1>...</h1>
</div>
</div>
<!-------------------------------------------------------------
End of Second page
-------------------------------------------------------------->
Below is my js file. Please not this isnt set up for jquery mobile. Ive been changing my approch to this task a lot so i could use some help with seeting this up to work with JQM.
mysubmit=function(){
$("#submit").click(function(e){
e.preventDefault();
console.log('clicked');
var email= $.trim($("#email").val());
var password= $.trim($("#password").val());
$("#status").text("Logging you in...");
var loginString ="email="+email+"&password ="+password;
$.ajax({
type: "GET",crossDomain: true, cache: false,
url:"http://localhost/form/www/auth.php",
success: function(data){
console.log(data);
//get HTML
tml
var myarray = JSON.parse(data);
console.log(myarray);
if(data == "success") {
$("#status").text("You're logged in!");
localStorage.loginstatus = "true";
window.location.href = "welcome.html";
}
else if(data == "error")
{
$("#status").text("Ops, your login has failed");
}
}
});
});
Below is my php code. This is far from finished, although ive hit a brick wall with it and cant seem to find a way to get this working.
<?php
$host = "localhost";
$dbusername = "root";
$dbpassword = "";
$dbname = "registration";
$conn = new mysqli ($dbhost, $dbuser, $dbpass, $db);
if($conn->connect_error){
echo "Connection has failed";
}
else{
echo "Connect was successful";
}
if(isset($_POST["submit"]))
{
$username=$_POST["username"];
$password=$_POST["password"];
$query = "SELECT * FROM `users` WHERE `password` = '$password' and email='$email'";
$result = mysql_query(query);
$numRows = mysql_num_rows($result);
if($numRows==1){
session_start();
$_SESSION["username"] = $username;
header("Location: ./index.html");
else{
echo "Invalid Login Information";
}
}
}
Would really appreciate any help that people can give me with this.
Thank you in advance.