PHP Registration with jQuery | Lessoncup Programming Blog

Wednesday, 6 November 2013

PHP Registration with jQuery

Hi, today i am going to show a awesome jquery registration using php and Mysql and Ajax, i have developed this registration form with some features, validation, registered data send to server without page refresh using Ajax



HTML

take a form elements and arrange it a proper structure, here i have taken two div's to display loader image and error messages.
<div class="lessoncup">
<div class="success"></div>
  <div id="formbox">
    <div class="error"></div>
    <div id="loader"></div>
    <ul>
      <li> <span>First Name:</span><br/>
        <input name="fname" type="text" id="fname" class="forms1">
      </li>
      <li>Last Name<span>:</span><br/>
        <input name="lname" type="text" id="lname" class="forms1">
      </li>
      <li> <span>Email:</span><br/>
        <input name="email" type="text" id="email" class="forms1">
      </li>
      <li>Password<span>:</span><br/>
        <input name="pass" type="password" id="pass" class="forms1">
      </li>
      <li>Gender<span>:</span><br/>
        <select name="gender" class="forms1" id="gender">
          <option selected value="">Select</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
      </li>
      <li style="margin-top:5px;">
        <input name="send" type="button" value="Signup" class="send">
      </li>
    </ul>
  </div>
</div>

CSS

write styles for form elements, and error and success div's and put in display:none, after complete the registration the from elements will hide and slowly decrease the height of DIV
<style>

.lessoncup{width:400px; height:450px; background-color:#FFF; border:solid #CCC 5px;-webkit-box-shadow: 0 2px 3px #666;
box-shadow: 0 2px 3px #666; padding:10px; margin:0 auto; margin-top:50px; font-family:Arial, Helvetica, sans-serif; font-size:11px;}

.error{padding:10px; width:auto;height:14px;display:none; color:#F00; background-color:#000; border-radius:5px; font-size:12px;}

.success{padding:65px;display:none; color:#FF0;font-size:14px; margin:0 auto; width:230px;}

ul{ margin:0; padding:0; list-style:none;}

li{ padding:10px; padding-bottom:0; font-size:12px; color:#000;}

.send{ background-color:#000; border:none; border-radius:5px; padding:10px; cursor:pointer; color:#FFF; outline:none;}

.forms1{color:#000;padding:10px; border:solid #CCC 1px; resize:none; margin:5px 0 5px 0; outline:none;border-radius:5px; background-color:#F60;}

#formbox{width:180px; height:auto;margin:0 auto;}


.slide
{
height:150px;
background-color:#060;
transition:height 0.80s;
-webkit-transition:height 0.80s easeIn;
}

</style>

JAVASCRIPT

include the UI library along with common jquery plugin, i have used UI library to animate the error div while displaying the message, after filling the form fields , i have used ajax to send the user data to database without refresh the page, while ajax request the register.php file and hide the form elements and slowly animate the div and display the success message.
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="jquery-ui.js"></script>

<script>

$(document).ready(function(){
 
 $('.send').click(function(){

  var fname=$('#fname').val();
  var lname=$('#lname').val();
  var email=$('#email').val();
  var pass=$('#pass').val();
  var gender=$('#gender option:selected').val();
  
  var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
  
  if(fname==""){
   
   $('.error').effect("bounce",500).fadeIn(400).html('<b>Enter first name..</b>');
   
  }else if(lname==""){
   
   $('.error').effect("bounce",500).fadeIn(400).html('<b>Enter last name..</b>');
   
  }else if(email==""){
   
   $('.error').effect("bounce",500).fadeIn(400).html('<b>Enter email address..</b>');
   
  }else if(!emailReg.test(email)){
   
   $('.error').effect("bounce",500).fadeIn(400).html('<b>Enter Valid email address..</b>');
   
  }else if(pass==""){
   
   $('.error').effect("bounce",500).fadeIn(400).html('<b>Enter your password</b>');
   
  }else if(gender==""){
   
   $('.error').effect("bounce",500).fadeIn(400).html('<b>Select Your Gender..</b>');
   
  }else{
   
   
   $('.error').hide();
   var userdata= "fname="+fname+"&lname="+lname+"&email="+email+"&pass="+pass+"&gender="+gender;
   
   
   $("#loader").show();
   $("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle">&nbsp;<span class="loading">Work in precess...</span>');
   
   $.ajax({
    
    type:"post",
    data:userdata,
    url:"register.php",
    cache:false,
    success:function(msg){
     
     $('.forms1').val('');
     $('#formbox').fadeOut(100).hide();
     $('.lessoncup').addClass('slide');
     $('.success').fadeIn(200).html('<b>'+msg+'</b>');
     
    }
    
   });
   
   
   
  }
 });
 
});

</script>

PHP

connect this file to database and write the query to send the data to users table. here i put the query in conditon, if the query inserted records successfully it will give success message else it will show an error message.
<?php

$db = mysql_connect("localhost","root","") or die ("Unable to connect to Localhost");
mysql_select_db("lessoncup") or die ("Could not select the database.");

extract($_REQUEST);
include("db.php");

if(mysql_query("insert into users(fname,lname,email,pass,gender) values('$fname','$lname','$email','$pass','$gender')")){
 
 echo "You are successfully registered.";
 
}else{
 
 echo "something goes wrong.";
 
}

?>

Live Demo   Download Script

2 comments :

  1. I am following all of ur tutorials...U r really helping me with my learning.. thanks a lot..
    And i already gone through one of ur previous contact/registration forms... Both of these contains Regex which allows ".@gmail.com" to be valid..

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons