Jump to content

Display Msg In Div Tag Without Refreshing The Page Php Mysql Jquery Ajax


prash91

Recommended Posts

Hi got following code but dont know why it is not working

 

database: login

table name : register1

3 fields: username, password, email

 

filename : login.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>PHP Login with jQuery AJAX</title>

<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/jquery.latest.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

 

$("#login").click(function() {

 

var action = $("#form1").attr('action');

var form_data = {

username: $("#username").val(),

password: $("#password").val(),

is_ajax: 1

};

 

$.ajax({

type: "POST",

url: action,

data: form_data,

success: function(response)

{

if(response == 'success')

$("#form1").slideUp('slow', function() {

$("#message").html("<p class='success'>You have logged in successfully!</p>");

});

else

$("#message").html("<p class='error'>Invalid username and/or password.</p>");

}

});

 

return false;

});

 

});

</script>

</head>

<body>

<p> </p>

<div id="content">

<h1>Login Form</h1>

<form id="form1" name="form1" action="loginpost.php" method="post">

<p>

<label for="username">Username: </label>

<input type="text" name="username" id="username" />

</p>

<p>

<label for="password">Password: </label>

<input type="password" name="password" id="password" />

</p>

<p>

<input type="submit" id="login" name="login" />

</p>

</form>

<div id="message"></div>

</div>

</body>

</html>

 

filename : loginpost

 

<?php

 

$is_ajax = $_REQUEST['is_ajax'];

if(isset($is_ajax) && $is_ajax)

{

require("conn1db.php");

$username = $_REQUEST['username'];

$password = $_REQUEST['password'];

 

$sql=mysql_query("select * from register1 where username='$username' AND password='$password'");

if(mysql_num_rows($sql)>0)

{

// Register $myusername, $mypassword and redirect to file “login_success.php”

session_start();

$_SESSION['username'] = $_POST['username'];

echo “success”;

}

 

}

 

?>

 

file name : style.css

 

body, input {

font-family: Georgia, "Times New Roman", Times, serif;

}

#content {

background-color: #eee;

width: 300px;

margin: 0 auto;

border: 1px solid #aaa;

-moz-border-radius: 10px;

-moz-box-shadow: 0 0 10px #aaa;

-webkit-border-radius: 10px;

-webkit-box-shadow: 0 0 10px #aaa;

padding: 10px;

}

#form1 label {

display: block;

font-size: 16px;

line-height: 25px;

}

#form1 input[type=text], #form1 input[type=password] {

padding: 2px;

font-size: 16px;

line-height: 20px;

width: 250px;

}

#form1 input[type=submit] {

font-size: 20px;

font-weight: bold;

padding: 5px;

}

.success {

color: #060;

}

.error {

color: red;

}

Link to comment
Share on other sites

Please use the [code][/code] tags around your code, as it helps make both your post and your code a lot easier to read. Also, you have to define what "not working" means, preferably with (complete) error messages. We don't know what you're trying, what you're expecting, or anything but what you explicitly tell us.

 

PS: I also recommend that you read this article.

Link to comment
Share on other sites

Hi have following details of my code, I am making user login, if user click on submit button and if the user is valid the form will side with msg "You have logged in successfully " else it will display msg "incorrect username or password" , the msg will get display in DIV message tag and without reloading the page.so i am using ajax with support of jquery...

 


  •  

 

Posted Today, 07:36 PM

Hi got following code but dont know why it is not working

 

database: login

table name : register1

3 fields: username, password, email

 

filename : login.php

 

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"][color="#0f72da"]http://www.w3.org/TR...ransitional.dtd[/color][/url]">
< html xmlns="[url="http://www.w3.org/1999/xhtml"][color="#0f72da"]http://www.w3.org/1999/xhtml[/color][/url]">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
< title>PHP Login with jQuery AJAX</title>
< link rel="stylesheet" type="text/css" href="css/style.css" />
< script type="text/javascript" src="js/jquery.latest.min.js"></script>
< script type="text/javascript">
$(document).ready(function() {

$("#login").click(function() {

var action = $("#form1").attr('action');
var form_data = {
username: $("#username").val(),
password: $("#password").val(),
is_ajax: 1
};

$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == 'success')
$("#form1").slideUp('slow', function() {
$("#message").html("<p class='success'>You have logged in successfully!</p>");
});
else
$("#message").html("<p class='error'>Invalid username and/or password.</p>");
}
});

return false;
});

});
< /script>
< /head>
< body>
< p> </p>
< div id="content">
<h1>Login Form</h1>
<form id="form1" name="form1" action="loginpost.php" method="post">
<p>
<label for="username">Username: </label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="password">Password: </label>
<input type="password" name="password" id="password" />
</p>
<p>
<input type="submit" id="login" name="login" />
</p>
</form>
<div id="message"></div>
< /div>
< /body>
< /html>

 

 

filename : loginpost

< ?php

$is_ajax = $_REQUEST['is_ajax'];
if(isset($is_ajax) && $is_ajax)
{
require("conn1db.php");
$username = $_REQUEST['username'];
$password = $_REQUEST['password'];

$sql=mysql_query("select * from register1 where username='$username' AND password='$password'");
if(mysql_num_rows($sql)>0)
{
// Register $myusername, $mypassword and redirect to file “login_success.php”
session_start();
$_SESSION['username'] = $_POST['username'];
echo “success”;
}

}

?>[
/code]


file name : style.css
[code]
body, input {
font-family: Georgia, "Times New Roman", Times, serif;
}
#content {
background-color: #eee;
width: 300px;
margin: 0 auto;
border: 1px solid #aaa;
-moz-border-radius: 10px;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0 0 10px #aaa;
padding: 10px;
}
#form1 label {
display: block;
font-size: 16px;
line-height: 25px;
}
#form1 input[type=text], #form1 input[type=password] {
padding: 2px;
font-size: 16px;
line-height: 20px;
width: 250px;
}
#form1 input[type=submit] {
font-size: 20px;
font-weight: bold;
padding: 5px;
}
.success {
color: #060;
}
.error {
color: red;
}

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.