Some users doesn't like to filling the registration form. So that I had implemented login and singup fields in same block just controlling with jquery and PHP. It's is very simple javascript and basic PHP code.
Download Script 
Live DemoJavascript code
$('#signup').click(function(){} - signup is the ID of the radio. Using $("#login_block").hide() hide the login block and $("#signup_block").show() shows signup block.
<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>
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>
HTML Code
Contains simple html code. signup_block style display none.
<form method="post" action="loginup.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 "/>
</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 "/>
</div>
</form>
<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 "/>
</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 "/>
</div>
</form>
loginup.php
<?php
if($_POST)
{
$email = $_POST['email'];
$password = $_POST['password'];
$newpassword = $_POST['newpassword'];
if($_POST['password'] && $_POST['email'])
{
$sql=mysql_query("SQl select statement");
echo "Login success";
}
else if($_POST['newpassword'] && $_POST['email'])
{
$sql=mysql_query("SQl Insert values statement");
echo "Registration Success";
}
}
?>
if($_POST)
{
$email = $_POST['email'];
$password = $_POST['password'];
$newpassword = $_POST['newpassword'];
if($_POST['password'] && $_POST['email'])
{
$sql=mysql_query("SQl select statement");
echo "Login success";
}
else if($_POST['newpassword'] && $_POST['email'])
{
$sql=mysql_query("SQl Insert values statement");
echo "Registration Success";
}
}
?>
Sign up for testking CISSP online training and learn all about ajax, mysql, php and jQuery using testking 640-863 tutorials and testking 642-825 live demos.
hey, thanks for this post.
ReplyDeletebut why u dont use $("#object_id").val() to get the value ?
thanks .......
ReplyDeleteWhy you use document.getElementById ?
ReplyDeletewhy not use jQuery selector?
regards
@Buzzknow
ReplyDeleteCode Modified
Simple but very usefull.
ReplyDeleteNo offence, but you're learning PHP & JS but can't set proper labels in HTML?
ReplyDeletefrom a usability pov, I think you have really simplified this quite well.
ReplyDeleteThis is so simple. If you make something more, like: control the error with ajax, sending email, ... then the tutorial will be better.
ReplyDeleteHm...
ReplyDelete1. please link the labels to the input fields
2. make your js code more reusable for others
3. why don't you modify the given form instead of showing or hiding the extra block?
4. sanitize user input data in php !!! (high security risk)
Good tutorial. Great thinking UX-wise !
ReplyDeleteGood code and learning curve for beginner. I just want to mention for beginners that, all times to keep in mind filter input before pass user inputted value to mysql. Otherwise mysql injection may happen.
ReplyDeleteVery useful
ReplyDeleteNice code.. Very simple..
ReplyDeleteBut there no submit validation / error message
Good share!
Very good code. This simplifies the login or registration process on a website. Nice job!!
ReplyDeletecool
ReplyDeleteVery nice and thanx
ReplyDeleteawesome :)
ReplyDeleteuseful info
ReplyDeleteWill ask our developer to give it a try !
ReplyDelete~Ash
simple is better r not,,it very simple...........
ReplyDeleteThanks for this good project
ReplyDeletenice one
ReplyDeletevery usefull for project.
ReplyDeleteThanks for such a great article here. I was searching for something like this for quite a long time and at last I’ve found it on your blog. It was definitely interesting for me to read about web applications and their market situation nowadays. thanks one
ReplyDeleteVery nice my dear .... :)
ReplyDeleteGreat Idea, I really appreciate. It is just an skeleton, we can enhance according to our requirement, simple, but great logic. :-)
ReplyDeletegood tutorial.but it would great if mentioned the procedure to run the code for beginners
ReplyDeletenice tutorial.....
ReplyDeletevery nice tutorial. and interesting site. is that free to edit/modify and use your code for my design. thank you I look forward to talking to you. Have a nice day!
ReplyDeletecool
ReplyDeletecool example
ReplyDeletegood
ReplyDeleteGreat Job
ReplyDelete