This section contains the detail about the Same Form for Login & Signup using jquery & PHP.
Same Form for login & signup using jQuery + PHP
In this section, you will find the same login form use for login as well as signup using jQuery & PHP.
The jQuery is used to hide & show the password field & submit button. It also contains radio button to change your choice of action. The choices are- whether you want to login or signup. The event fired on changing the radio button.
The PHP code contains the database connectivity as well as the fetching or inserting login or signup details according to the action and button submission.
Given below example will given you a clear idea :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
$('#signup').click(function()
{
$('#password').val('');
$('#login_block').hide();
$('#signup_block').show();
});
$('#login').click(function()
{
$('#newpassword').val('');
$('#signup_block').hide();
$('#login_block').show();
});
});
</script>
</HEAD>
<BODY>
<h3>Login page jQuery+PHP</h3>
<form method="post" action="login.php">
<div>
<label>Email</label> <br/>
<input type="text" name="email"/><br />
<input type="radio" name="choose" id="login" checked="checked"/> I have an account
<br />
<input type="radio" name="choose" id="signup"/> I am new!<br />
</div>
<div id="login_block">
<label>Password</label><br />
<input type="password" name="password" id="password"/><br/>
<input type="submit" value=" Login " name="Login"/>
</div>
<div id="signup_block" style="display:none">
<label>Choose password</label><br/>
<input type="password" name="newpassword" id="newpassword" /><br/>
<input type="submit" value=" Signup " name="Signup"/>
</div>
</form>
</BODY>
</HTML>
<?php
session_start();
$host="192.168.10.13"; // Host name
$username="root"; // Mysql username
$password="root"; // Mysql password
$db_name="mailer"; // Database name
$tbl_name="admin_login"; // Table name
///////////////////for login//////////////////
if (isset($_POST['Login'])) {
$con = mysql_connect($host,$username,$password) or die(mysql_error());;
mysql_select_db($db_name, $con) or die(mysql_error());
//Form variable
$adminName=$_POST["email"];
$password=$_POST["password"];
$sql= "SELECT * FROM adminlogin WHERE admin_name='$adminName' and password='$password'";
$result=mysql_query($sql,$con) or die(mysql_error());
if($row = mysql_fetch_array($result)){
//Login sucessfull
?>
<script>alert("Login succesfull!");</script>
<?php
exit;
}else{
//echo $userLoginErrorMessage;
?>
<script>alert("Invalid Login details! Please try again!");</script>
<?php
}
}
//////////////for Signup///////////////
if (isset($_POST['Signup'])) {
$con = mysql_connect($host,$username,$password) or die(mysql_error());;
mysql_select_db($db_name, $con) or die(mysql_error());
//Form variable
$adminName=$_POST["email"];
$password=$_POST["newpassword"];
//$sql= "SELECT * FROM adminlogin WHERE admin_name='$adminName' and password='$password'";
//$result=mysql_query($sql,$con) or die(mysql_error());
$sql="INSERT INTO adminlogin(admin_name,password)VALUES('$adminName', '$password')";
if (!mysql_query($sql,$con))
{
die('Error: ' . mysql_error());
}else{
?>
<script>alert("SignUp successfully!!");window.close();</script>
<?php
}
mysql_close($con);
}
?>
Output :
When you choose radio button "I have an account" it will show following :
When you choose "i am new", you can signup & it will show :
[ 0 ] Comments