hello friends, this is my continuation post of previous tutorial, well the previous is just a creating bootstrap signup form along with validation and now in this tutorial we will see Creating Bootstrap Form with Ajax jQuery PHP and MySQL., we already have ajax registration tutorial but that was simple for beginners and this one goes advance, we will see live email availability, Live jQuery validation, and signup process will goes silently without page reload. before proceed you can check the live demo of this tutorial to see how it goes, so let's get started.
Looking for Bootstrap Login, Sign Up Modal Forms, Then Here is the Tutorial
In previous tutorial we already covered creating a responsive bootstrap form with validation so i am going to skip the bootstrap form and explaining the above defined title.
we will see
- How to use Remote rule in jQuery Validation
- Live Email Availability check
- jQuery Ajax JSON Response
- Ajax Signup
Looking for Bootstrap Login, Sign Up Modal Forms, Then Here is the Tutorial
In previous tutorial we already covered creating a responsive bootstrap form with validation so i am going to skip the bootstrap form and explaining the above defined title.
Database Table
the database name i have used here is ajax-submit, so create database and copy/paste following sql code into your phpmyadmin to store user details.
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(60) NOT NULL,
`email` varchar(60) NOT NULL,
`password` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
config.php
simpel database configuration file created with PDO extension.
<?php
define('DBhost', 'localhost');
define('DBuser', 'root');
define('DBPass', '');
define('DBname', 'ajax-submit');
try{
$DB_con = new PDO("mysql:host=".DBhost.";dbname=".DBname,DBuser,DBPass);
}catch(PDOException $e){
die($e->getMessage());
}
ajax-signup.php
simpel php file contains only php code which inserts and creates new user record and store it into mysql table, it will give JSON response as an output. $response = array(); contains json string as status and message. whatever it returns it will be in JSON format.<?php
header('Content-type: application/json');
require_once 'config.php';
$response = array();
if ($_POST) {
$name = $_POST['name'];
$email = $_POST['email'];
$pass = $_POST['cpassword'];
$stmt = $DB_con->prepare('INSERT INTO users(name,email,password) VALUES(:name, :email, :pass)');
$stmt->bindParam(':name', $name);
$stmt->bindParam(':email', $email);
$stmt->bindParam(':pass', $pass );
$stmt->execute();
// check for successfull registration
if ($stmt->rowCount() == 1) {
$response['status'] = 'success';
$response['message'] = '<span class="glyphicon glyphicon-ok"></span> registered sucessfully, you may login now';
} else {
$response['status'] = 'error'; // could not register
$response['message'] = '<span class="glyphicon glyphicon-info-sign"></span> could not register, try again later';
}
}
echo json_encode($response);
Remote Rule
Here's how you can use Remote Rule within jQuery Validation Rules, it will call "check-email.php" file silently and returns true/false.
email : {
required : true,
validemail: true,
remote: {
url: "check-email.php",
type: "post",
data: {
email: function() {
return $( "#email" ).val();
}
}
}
},
Ajax Signup Code
if there is no validation error the submithandler call the submitForm() function, the function contains ajax method which calls the "ajax-signup.php" page as POST request and print JSON response within div tag and shows as slideDown effect.
function submitForm(){
$.ajax({
type : 'POST',
async: false,
url : 'ajax-signup.php',
data : $('#register-form').serialize(),
dataType : 'json',
success : function(data){
console.log(data);
$('button').html('<img src="ajax-loader.gif" /> signing up...').attr('disabled', 'disabled');
setTimeout(function(){
if ( data.status==='success' ) {
$('#errorDiv').slideDown(200, function(){
$('#errorDiv').html('<div class="alert alert-info">'+data.message+'</div>');
$('#errorDiv').delay(3000).slideUp(100);
$("#register-form")[0].reset();
$('#btn-signup').html('<span class="glyphicon glyphicon-log-in"></span> Sign Me Up');
$('#btn-signup').removeAttr('disabled');
});
} else {
$('#errorDiv').slideDown(200, function(){
$('#errorDiv').html('<div class="alert alert-danger">'+data.message+'</div>');
$('#errorDiv').delay(3000).slideUp(100);
$('#btn-signup').html('<span class="glyphicon glyphicon-log-in"></span> Sign Me Up');
$('#btn-signup').removeAttr('disabled');
});
}
},3000);
},
error: function(){alert('Error!')}
});
return false;
}
My friend, thanks for sharing your experiences, it helps me learn more about web programming.
ReplyDeletewhat I want is a login form that fits this registration system jQuery.
hello rildo, there is ajax login script i have already published, please go through all the tutorials...
Deletenice
ReplyDeletethanks, danish :)
Deletethank you pradeep, for this tutorial, i was looking for the same and landed here.
ReplyDeletethanks , keep posting .
you're welcome, rajat :)
DeleteYou don't appear to be encrypting the password at all in this example, storing plaintext passwords in the database is a very very bad idea, use either pbkdf2 or bcrypt for that.
ReplyDeleteAlso sending back JSON responses with HTML snippets that contain layout code and CSS classes doesn't make a very re-usable API and ties the API to the front end and is not really the correct place where layout code belongs.
hello there, well i have just covered here creating ajax signup form with bootstrap design along with jquery validation and we already have login/signup tutorials with password encryption, and this is simple snippet it's easy to encrypt password you just need to add hashing functions, that's it.. BTW thanks for the suggestion ....
DeletePradeep, thank you for your tutorials.
ReplyDeleteThis script does not pass email validation and allows to post new records with the same e-mail address. The script in your previous tutorial works perfect. (https://codingcage.com/2015/11/ajax-registration-script-using-jquery-php.html)
Regards,
Andrey
Hello there, this one is also working perfectly, did you make some changes in it, if so then let me know ?
DeletePlease can you build students results checking portal too?
ReplyDeleteHi.
ReplyDeleteIt would be great if you put a button "DEMO" on your examples.
Hi, Arslan, i'll publish demo of this tutorial, very soon ...
DeleteI love the information you present here and can’t wait to share it my friends. http://goo.gl/Qku3fK
ReplyDeleteThanks Naveen :)
Deletethanks
ReplyDeleteyou're welcome, Mahesh :)
Deletewonderfull PRADEEP
ReplyDeleteThanks Paulo, keep visiting :)
Deletehi i want to download this script i already subcribe you but when i try to download error email not found please subcribe but already subcribe
ReplyDeleteHello junaid, you can download the code now ...
Deleteno i cant download the file
Deletei cant download the code also
ReplyDeletei cant download the code also
ReplyDelete[email protected]
ReplyDeletethis is what i already subscrip dont know why still cant download the code plz help me sir
where is check_email.php :)
ReplyDeleteit is in zip file, please download ...
Deletei cant download the file
DeleteHey I want to download this script, I have already subscribed but when I try to download it an error pops up that my email is not found please subscribe
ReplyDeletehey i want to download the script but i get an error that my email is not found. I have already subscribed.
ReplyDeletehey sir why i cant download this tutorial?
ReplyDeletehello karl, you can download the code...
Deletecan you make a log in form(with login.html ) on this signup tutorial? I'm new to ajax.. I'm trying to link your other login tutorial to this signup tutorial but it won't work I don't know what to do.
ReplyDelete:( please help me.. great tutorials btw :)
si se puede
Deletethanks for sharing,
ReplyDeleteWhat I want is a login form that fits this system. Try to do but I can not.
You can share the login.
ReplyDeletedo you have any tutorial on jquery datepicker and save selected date into mysql database?
ReplyDeletedo you have a tutorial on how to add jquery date picker and save date into mysql database?
ReplyDelete