Video tutorial illustrates development of user registration form using jQuery AJAX method.
In this tutorial we shall build a registration form using which users can register without leaving the webpage. i.e., without being redirected to any other pages once he / she hits the submit/register button.
HTML code
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <head><title>Registration Form: jQuery</title></head> <body> <form id="myForm" action="process.php" method="POST"> Username: <input type="text" name="username"/><br /> Password: <input type="password" name="pass"/><br /> First Name: <input type="text" name="fname"/><br /> Last Name: <input type="text" name="lname"/><br /> <button id="submit">register</button> </form> <div id="ack"></div> <script type="text/javascript" src="script/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="script/my_script.js"></script> </body> </html> |
Here we have a simple form with username, password, first name, last name fields and a button. Also a div with an id of ack where appropriate messages are displayed to the users.
Form has an id of myForm.
process.php file in the action field.
POST method.
PHP File: Database Connection Code
db.php
1 2 3 4 | < ?php
$conn = mysql_connect('localhost', 'root', '');
$db = mysql_select_db('people');
?> |
Here we’re connecting to the database called people.
Also Read: Connecting To MySQL server From PHP
Database Details:
Database Name: people
Table Name : users
Fields : slno, username, password, fname, lname.
PHP File: Inserting user entered data to database table
process.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < ?php
include_once('db.php');
$username = mysql_real_escape_string( $_POST["username"] );
$password = mysql_real_escape_string( md5($_POST["pass"]) );
$fname = mysql_real_escape_string( $_POST["fname"] );
$lname = mysql_real_escape_string( $_POST["lname"] );
$sql = "INSERT INTO users VALUES('',
'$username',
'$password',
'$fname',
'$lname')";
if( mysql_query($sql) )
echo "Inserted Successfully";
else
echo "Insertion Failed";
?> |
Here we use mysql_real_escape_string() method to avoid sql injection by the user.
We accept all the values entered by the user and store them in php variables.
Later we formulate MySQL query and pass these user entered values to it and execute it using mysql_query() PHP method.
Using the conditional logic statement we check if the query got executed or not. Then output appropriate message using echo.
This message will be retrieved by the call back function in jQuery and is being further processed as required.
jQuery File: Accessing The Data And Displaying
my_script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 | $("#submit").click( function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info) {
$("#ack").empty();
$("#ack").html(info);
});
$("#myForm").submit( function() {
return false;
});
}); |
Once the user clicks on the button with an id submit, we call $.post() method.
First parameter being the URL to which the data is being sent.
Second parameter is the actual data, which is being serialized using serializeArray() method of jQuery. It formats the user entered data into key => value pairs.
Third parameter, is the call back function.
Using the data returned by process.php we display the data in div tag with an id of ack.
We also disable the redirection of the webpage by returning false once the user clicks on the button.
jQuery File: Clearing the input fields
my_script.js
1 2 3 4 5 6 7 | function clear() {
$("#myForm :input").each( function() {
$(this).val("");
});
} |
It’s a custom function which selects all the input fields, loops through them and assigns an empty value.
jQuery File: Full / Final Code
my_script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $("#submit").click( function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info) {
$("#ack").empty();
$("#ack").html(info);
clear();
});
$("#myForm").submit( function() {
return false;
});
});
function clear() {
$("#myForm :input").each( function() {
$(this).val("");
});
} |
Call clear() method after the user entered data is processed.
Registration Form Using jQuery + AJAX: PART 1
[youtube https://www.youtube.com/watch?v=55FwdtnvQAM]
This way we turned our traditional registration form to a standard AJAX application form.
In tomorrows video tutorial lets see client side validation using jQuery and server side validation using PHP.