Login or Signup with Jquery and PHP
Wall Script
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/
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.
web notification

33 comments:

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

    ReplyDelete
  2. Why you use document.getElementById ?

    why not use jQuery selector?

    regards

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

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

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

    ReplyDelete
  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)

    ReplyDelete
  7. Good tutorial. Great thinking UX-wise !

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

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

    Good share!

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

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

    ~Ash

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

    ReplyDelete
  13. Thanks for this good project

    ReplyDelete
  14. very usefull for project.

    ReplyDelete
  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

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

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

    ReplyDelete
  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!

    ReplyDelete

mailxengine Youtueb channel
Make in India
X