Form Submission with MYSQLi

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^*</label>

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

    <label>Email^*</label>

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

    <label>Gender^*</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

3. 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.