Ajax Signup Form Using | Bootstrap, jQuery, PHP and MySQL

Ajax Signup Form Using Bootstrap, jQuery, PHP and MySQL

Signup Form Using Bootstrap, jQuery, PHP and MySQL Ajax

Making bootstrap information exchange frame alongside approval and now in this instructional exercise, we will see Creating Bootstrap Form with Ajax jQuery PHP and MySQL. However, that was straightforward for learners and this one go propel, we will see live email accessibility, Live jQuery approval, and information exchange process will go noiselessly without page reload. before continue you can check the live demo of this instructional exercise to perceive how it goes, so how about we begin.

Live Demo   Download Source Code

Index.php

<div class="signup-form-container">
    
         <!-- form start -->
         <form method="post" role="form" id="register-form" autocomplete="off">
         
         <div class="form-header">
         	<h3 class="form-title"><span class="glyphicon glyphicon-user"></span> Sign Up</h3>
                      
         
                      
         </div>
                  
         <div class="form-body">
         
         	  <!-- json response will be here -->
              <div id="errorDiv"></div>
              <!-- json response will be here -->
                      
         	  <div class="form-group">
                   <div class="input-group">
                   <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                   <input name="name" type="text" id="name" class="form-control" placeholder="Name" maxlength="40" autofocus="true">
                   </div>
                   <span class="help-block" id="error"></span>
              </div>
                        
              <div class="form-group">
                   <div class="input-group">
                   <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
                   <input name="email" id="email" type="text" class="form-control" placeholder="Email" maxlength="50">
                   </div> 
                   <span class="help-block" id="error"></span>                     
              </div>
                        
              <div class="row">
                        
                   <div class="form-group col-lg-6">
                        <div class="input-group">
                        <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                        <input name="password" id="password" type="password" class="form-control" placeholder="Password">
                        </div>  
                        <span class="help-block" id="error"></span>                    
                   </div>
                            
                   <div class="form-group col-lg-6">
                        <div class="input-group">
                        <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                        <input name="cpassword" type="password" class="form-control" placeholder="Retype Password">
                        </div>  
                        <span class="help-block" id="error"></span>                    
                   </div>
                            
             </div>
                        
                        
            </div>
            
            <div class="form-footer">
                 <button type="submit" class="btn btn-info" id="btn-signup" style="color: #fff; background-color: #1d91d0;">
                 SUBMIT
                 </button>
            </div>


            </form>
            
           </div>

Style.css

@charset "utf-8";
/* CSS Document */

body{
	
	background-color:#f9f9f9;
}

.signup-form-container {
	
	border-radius: 7px;
    background: #ffffff;
    border-top: 5px solid #0094e4;
    margin: 4% auto;
    max-width: 500px;
    border-top-color: #1d91d0;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1) !important;
}

.form-header{
	
	color:#444;
	display:block;
	padding:20px;
	position:relative;
	border-bottom:1px solid #f4f4f4;
}

.form-header .form-title {
	display:inline-block;
	font-size:18px;
	margin:0;
	line-height:1
}

.form-body {
	border-top-left-radius:0;
	border-top-right-radius:0;
	border-bottom-right-radius:3px;
	border-bottom-left-radius:3px;
	padding:20px;
}

.form-footer {
	border-top-left-radius:0;
	border-top-right-radius:0;
	border-bottom-right-radius:3px;
	border-bottom-left-radius:3px;
	border-top:1px solid #f4f4f4;
	padding:20px;
	background-color:#fff
}

.form-control{
	
	font-size: 16px;
    height: auto;
    padding: 7px 9px;
}
.form-group #error{
	color:#a94442;
}

.glyphicon {
    color: #12394e !important;
}

.alert-info {
   
    background-color: rgba(29, 145, 208, 0.58) !important;
    
}

checkemail.php

<?php

	require_once 'config.php';

	if ( isset($_REQUEST['email']) && !empty($_REQUEST['email']) ) {
		
		$email = trim($_REQUEST['email']);
		$email = strip_tags($email);
		
		$query = "SELECT userEmail FROM tbl_users WHERE userEmail=:email";
		$stmt = $DBcon->prepare( $query );
		$stmt->execute(array(':email'=>$email));
		
		if ($stmt->rowCount() == 1) {
			echo 'false'; // email already taken
		} else {
			echo 'true'; 
		}
	}

Signup.php

<?php

	header('Content-type: application/json');

	require_once 'config.php';
	
	$response = array();

	if ($_POST) {
		
		$name = trim($_POST['name']);
		$email = trim($_POST['email']);
		$pass = trim($_POST['cpassword']);
		
		$full_name = strip_tags($name);
		$user_email = strip_tags($email);
		$user_pass = strip_tags($pass);
		
		// sha256 password hashing
		$hashed_password = hash('sha256', $user_pass);
		
		$query = "INSERT INTO tbl_users(fullName,userEmail,userPassword) VALUES(:name, :email, :pass)";
		
		$stmt = $DBcon->prepare( $query );
		$stmt->bindParam(':name', $full_name);
		$stmt->bindParam(':email', $user_email);
		$stmt->bindParam(':pass', $hashed_password);
		
		// check for successfull registration
        if ( $stmt->execute() ) {
			$response['status'] = 'success';
			$response['message'] = '<span class="glyphicon glyphicon-ok"></span> &nbsp; registered sucessfully, you may login now';
        } else {
            $response['status'] = 'error'; // could not register
			$response['message'] = '<span class="glyphicon glyphicon-info-sign"></span> &nbsp; could not register, try again later';
        }	
	}
	
	echo json_encode($response);

You May Also Like

About the Author: Ranjith Kumar A

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x