9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Friday, April 23, 2010

Login or Signup with Jquery and PHP

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 Demo



Javascript 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>

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>

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";
}

}
?>

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.
Comments
{ 28 comments }
Anonymous said...

hey, thanks for this post.
but why u dont use $("#object_id").val() to get the value ?

Sampa said...

thanks .......

Buzzknow said...

Why you use document.getElementById ?

why not use jQuery selector?

regards

Srinivas Tamada said...

@Buzzknow

Code Modified

João Pedro Pereira said...

Simple but very usefull.

bart said...

No offence, but you're learning PHP & JS but can't set proper labels in HTML?

Amit said...

from a usability pov, I think you have really simplified this quite well.

Deluxe Blog Tips said...

This is so simple. If you make something more, like: control the error with ajax, sending email, ... then the tutorial will be better.

Tom said...

Hm...
1. 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)

Tom Hermans said...

Good tutorial. Great thinking UX-wise !

Mahmud Ahsan said...

Good 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.

Anonymous said...

Very useful

Anonymous said...

Nice code.. Very simple..
But there no submit validation / error message

Good share!

Will Jones said...

Very good code. This simplifies the login or registration process on a website. Nice job!!

Anonymous said...

cool

Rahul said...

Very nice and thanx

madhukarah said...

awesome :)

eGrove Systems said...

useful info

Web Hosting India said...

Will ask our developer to give it a try !

~Ash

adisheshu said...

simple is better r not,,it very simple...........

Anonymous said...

Thanks for this good project

Latest Technology Information said...

nice one

Anonymous said...

very usefull for project.

Miss.R said...

Thanks 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

hasangadallah said...

Very nice my dear .... :)

Anonymous said...

Great Idea, I really appreciate. It is just an skeleton, we can enhance according to our requirement, simple, but great logic. :-)

Anonymous said...

good tutorial.but it would great if mentioned the procedure to run the code for beginners

Alvin devid said...

nice tutorial.....

Post a Comment