Form Submission with MYSQLi

Pre-requisites: Basic Understanding HTML, CSS, PHP and MySQL.


In this project:

  • We will create a HTML form.
  • We will style the form using CSS.
  • Form will be submitted to the server and data will be saved using MySQLi

Run form.php file in your browser to get the following output.

 

 

 

Code Explanation of form.php

<link rel="stylesheet" type="text/css" href="css/style.css">
  • Style.css file is attached to provide some styles to our page.
 <script src="js/jquery.js"></script>
  • It is necessary to include jQuery file inorder to use jquery functions. You can download it form https://jquery.com. 
<script src="js/js.js"></script>

 

  •  Form validations and ajax submission script is mentioned in this code.

 

<form action="process.php" method="POST" id="Userform">

    <label>Name<sup>*</sup></label>

    <input type="text" name="name" id="name" /><br>

    <label>Email<sup>*</sup></label>

    <input type="text" name="email" id="email" /><br>

    <label>Gender<sup>*</sup></label>

    <input type="radio" name="gender" value="female" checked="checked" /> Female

    <input type="radio" name="gender" value="male" /> Male<br>

    <label>Reviews</label>

    <textarea rows="3" cols="23" name="reviews" id="reviews"></textarea><br>

    <input type="submit" name="submit" value="SUBMIT" id="form_submit">

</form>

 

DESCRIPTION

  1. A user form with “id=Userform”  has been created with four fields and one submit button.
  2. Each field is given an id and name attribute with required value. for example :
 <input type="text" name="name" id="name">

Where,

  • name input field is given name=”name” and id=”name”.
  • Name attributes are posted to the server while form submission and  Id attribute is used to perform JS validation
  1. Button is also given an id form_submit on which click event is defined. Validations are performed through JS function. If form is validated, then it goes to process.php as mentioned in the action attribute of form tag.

      

<form action="process.php" method="POST" id="Userform">

             We are posting the values via HTTP POST method.      

 


 

Code Explanation of js.js

$("#form_submit").click(function(){

        var name= $("#name");

        var email = $("#email");

        if(name.val() == ""){

            name.focus();

            alert("Please enter name");

            return false;

        }else if(email.val() == "" || validateEmail(email.val()) == 0){

            email.focus();

            alert("Please enter email");

            return false;

        }

    });

DESCRIPTION

           Validation for empty field value is performed here. Like :

                 

 if(name.val() == ""){

            name.focus();

            $("#signup__error").html("Please Enter Name");

   }   

If name field is empty, it will generate error, display the alert message on screen and return false. In a similar way, validations are performed for other fields as well. Conditions are added according to the requirement.

 

 


Summary

In this project, we have learned to create login/ signup page.

  • HTML and CSS are used to create the layout of webpage.
  • Form validations are performed using jQuery in js.js file which is included in the head tag for index file.
  • MySQLi queries are used to connect to a database and save data into the table as per the requirement.

Help Us to Improve our content

Let's Talk
Go back to Previous Course