Here AJAX Registration Page with HTML & Javascript. Checking username, length, password match..
Live Preview
Download$(document).ready() :
The most commonly used command in jQuery is $(document).ready(). It makes sure code is executed only when a page is fully loaded. We often place code blocks inside this $(document).ready() event.
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> // Your Code $(document).ready(function() { // Put all your jQuery goodness in here. } |
Checking Username Length:
When guest types something in Username field less than 3 characters and focus move from it to next field. An error will be occurred .
usr = $("#txt_username").val(); if(usr.length >= 3) //checking username length { // Checking username code here.. } else { //Error Message code here.. } |
Chekcing Username:
When guest types something in Username field greater than or equal 3 characters and focus move from it to next field Then, A waiting message will be displayed with small image as loader.gif.
$("#div_status").html('<img src="loader.gif" align="absmiddle"> Checking username....'); |
If Username is available:
if username available from database. Ajax will display like this, Otherwise, An error will be occurred.
$.ajax({ type: "POST", url: "check_username.php", data: "username="+ usr, success: function(msg){ $("#div_status").ajaxComplete(function(event, request, settings){ if(msg == 'OK') { // If the username available, goes here. } else { //If the username not available, goes here. } |
Checking Password:
When guest types something in password field less than 3 characters and focus move from it to next field. An error will be occurred .
var str_confirm_password = $("#txt_confirm_password").val(); if(str_password.length >=3) { // Checking Password match code here.. } else { // Error message code here.. } |
Checking Password Match:
When guest types something in Password & Confirm Password fields, and focus move from it to next field. Then, it will check value of both fields. If both field’s value are not same then, an error will be displayed.
If not match
If match
var str_password = $("#txt_password").val(); var str_confirm_password = $("#txt_confirm_password").val(); if(str_password!=str_confirm_password) { // If not match, goes here, } else { //If match, goes here. } |
“Sign Up Now” Button :
When guest push “Sign Up Now!” button. It goes to next page .
function fn_onclick() { if(str_status == "OK" && str_pwd_status =="OK" && str_password != '' && str_confirm_password != '' ) { $("#div_msg").html('<div id="logged_in"> <br />' + 'Thanks for Registering <br />' + '<img align="absmiddle" src="loader_bar.gif">' + '<br /> Please wait while we redirect you to welcome page...</div>'); setTimeout('go_to_next_page()', 4000); } } function go_to_next_page() { window.location = 'welcome.html'; } |
.removeClass() & .addClass() functions :
.removeClass() & .addClass() functions are used for add styles into username & password fields. In code, ‘css_ok’ & ‘css_error’ regarding from ‘style.css’ . For instance these functions show the box green if the values entered in the boxes are correct & otherwise red color
.
<link rel="stylesheet" type="text/css" href="style.css" /> // Your code here.. $("#txt_username").removeClass('css_ok'); $("#txt_username").addClass("css_error"); |
In style.css,
.css_ok { border: 1px solid green; color: #333333; } .css_error { border: 1px solid #AC3962; color: #333333; } |
