Login or Signup with Jquery and PHP
Wall Script
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/
<script type="text/javascript">




Contains simple html code. signup_block style display none.
<form method="post" action="loginup.php">

<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 id="login_block">
<label>Password</label><br />
<input type="password" name="password" id="password"/><br/>
<input type="submit" value=" Login "/>

<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 "/>


$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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


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

  2. Why you use document.getElementById ?

    why not use jQuery selector?


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

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

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

  6. 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)

  7. Good tutorial. Great thinking UX-wise !

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

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

    Good share!

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

  11. Will ask our developer to give it a try !


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

  13. Thanks for this good project

  14. very usefull for project.

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

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

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

  18. very 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!


Make in India