logo Send us mail:
contact@reliancewisdom.com
WhatsApp or call:
+234 (0)808 881 1560
TOGGLE NAVIGATION
Back to All Forum Posts
Javascript Form Validation and Submission to MySQL Database
Ishola Wasiu    Jan 1, 2017 at 05:01 PM    1    3989
I have a small project at hand in which I want to create a form validated with JavaScript and submitted into MySQL database with the use of PHP. Please how can I go about this?
Back to All Forum Posts

1 Answer
Ishola Ayinla says...
Jan 1, 2017 at 05:48 PM

Creating a membership based site seems like a daunting task at first. If you ever wanted to do this by yourself, then just gave up when you started to think how you are going to put it together using your PHP skills, then this article is for you. We are going to walk you through every aspect of creating a membership based site, with a secure members area protected by password.

The whole process consists of two big parts: user registration and user authentication. In the first part, we are going to cover creation of the registration form and storing the data in a MySQL database. In the second part, we will create the login form and use it to allow users access in the secure area.

REGISTRATION FORM
In order to create a user account, we need to gather a minimal amount of information from the user. We need his name, his email address and his desired username and password. Of course, we can ask for more information at this point, so let's also ask for the user's phone number. Here is a sample registration form:

<form name="registration_form" method="post" action="register.php">
        <input type="text" name="name">
        <input type="text" name="email">
        <input type="text" name="username">
       <input type="password" name="password">
        <input type="password" name="password_confirmation">
       <input type="text" name="phone_number">
        <input type="submit" value="Register">
        </form>

So, we have text fields for name, email and phone number. Notice that we also have two password fields. But why two? We have to ask the user to enter his password twice to make sure that he does not misspells it and locks himself out of the secure area.

FORM VALIDATION
At this point it is a good idea to put some form validation code in place, so we make sure that we have all the data required to create the user account. We need to check if name and email was filled in, and also if the two password fields are not empty and their values are identical.

Here is a sample Javascript validation function to be used for the sample form we created earlier:

<script language = "Javascript">
<!--
function Validate()
{
if (document.registration_form.name.value == '')
{
alert('Please fill in your name!');
return false;
}
if (document.registration_form.email.value == '')
{
alert('Please fill in your email address!');
return false;
}
if (document.registration_form.username.value == '')
{
alert('Please fill in your desired username!');
return false;
}
if (document.registration_form.password.value == '')
{
alert('Please fill in your desired password!');
return false;
}
if (document.registration_form.
password_confirmation.value == '')
{
alert('Please fill in your password 
again for confirmation!');
return false;
}
if (document.registration_form.
password.value != 
document.registration_form.
password_confirmation.value)
{
alert("The two passwords are not identical! "+
"Please enter the same password again for confirmation");
return false;
}
if (document.registration_form.
phone_number.value == '')
{
alert('Please fill in your phone number!');
return false;
}
return true;
}
//-->
</script>

Include this piece of code on your page, and change the tag to trigger the execution of the Validate() function on form submit:

<form name="registration_form" method="post"
action="register.php onsubmit="return Validate();">

To be on the safe side, you should also add some server side validation in the target PHP script to be sure that the user entered all the required data even if he has JavaScript disabled.

SAVING THE DATA IN THE DATABASE
Now that we gathered all the data, we need to store it into the database. You can run this query to create a sample table that we can use:

CREATE TABLE  'users'
'id_user' INT NOT NULL AUTO_INCREMENT ,
'name' VARCHAR( 128 ) NOT NULL ,
'email' VARCHAR( 64 ) NOT NULL ,
'phone_number' VARCHAR( 16 ) NOT NULL ,
'username' VARCHAR( 16 ) NOT NULL ,
'password' VARCHAR( 32 ) NOT NULL ,
PRIMARY KEY ( 'id_user' )
)

The id_user field will contain the unique id of the user, and is also the primary key of the table. Notice that we allow 32 characters for the password field. We do this because, as an added security measure, we will store the password in the database encrypted using MD5. Please note that because MD5 is an one-way encryption method, we won't be able to recover the password in case the user forgets it.

Now that we have our table, let's start creating the register.php file to which the data from the form is posted.

First, let's connect to the database.

$connect=mysql_connect("database_host",
"database_user",
"database_password");
mysql_select_db("database_name",$connect) or
die (mysql_errno().":<b> ".mysql_error()."</b>");

This is a sample database connection string. Most of the cases, you can use "localhost" for database host. Put in your username and password, and the database name, and the connection to the database is ready.

Here is a sample query that you can run to insert data into the database. We will have all our data available in the $_POST array, because we used "post" as the method for our form.

$insert_query = 'insert into users (
name,
email,
phone_number,
username,
password

values
(
"' . $_POST['name'] . '", 
 "' . $_POST['email'] . '",
 "' . $_POST['phone_number'] . '",
 "' . $_POST['username'] . '",
"' . md5($_POST['password']) . '"
)';
 
mysql_query($insert_query);

Notice that we use PHP function md5() to encrypt the password before inserting it into the database.

This is all that must be done in order to register a user for access to the secure members area. Of course, you can add more features to the process, such as checking for the length of the username and password and only allow a certain number of characters, or sending a confirmation email to the user. Or you can ask the user to confirm his email address, by sending him an email containing a link that he must click in order to activate his account. Another good idea is to add code to check against duplicate usernames or email addresses in the database.


Full Details