Ajax Serialize Form Data in PHP

 <?php


$servername = "localhost";
$username = "root";
$password = "";
$database = "ajax-form";

//Create Connection
$conn = new mysqli($servername, $username, $password, $database);

//Check Connection
if ($conn->connect_error) {
    die("Connection Failed: " . $conn->connect_error);
}
Above is mysqli_conn.php File which is included in below Files.






Below is index.php File.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PHP Ajax Pagination</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="main">
        <div id="header">
            <h1>PHP & Ajax Serialize Form</h1>
        </div>

        <div id="table-data">
            <!--When we use serialize() at that time <form> Tag is necessary-->
            <form id="submit_form">
                <table width="100%" cellspacing="10px">
                    <tr>
                        <td width="150px"><label>Name</label></td>
                        <td><input type="text" name="fullname" id="fullname"></td>
                    </tr>
                    <tr>
                        <td><label>Age</label></td>
                        <td><input type="number" name="age" id="age"></td>
                    </tr>
                    <tr>
                        <td><label>Gender</label></td>
                        <td>
                            <input type="radio" name="gender" value="male">Male
                            <input type="radio" name="gender" value="female">Female
                        </td>
                    </tr>
                    <tr>
                        <td><label>Country</label></td>
                        <td>
                            <select name="country">
                                <option value="ind">India</option>
                                <option value="pk">Pakistan</option>
                                <option value="ban">Bangladesh</option>
                                <option value="ne">Nepal</option>
                                <option value="sl">Srilanka</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="button" name="submit" id="submit" class="btn btn-info" value="Save"></td>
                    </tr>
                </table>
            </form>
            <div id="response"></div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#submit").click(function() {
                var name = $("#fullname").val();
                var age = $("#age").val();

                if (name == "" || age == "" || !$("input:radio[name=gender]").is(":checked")) {
                    $("#response").fadeIn();
                    $("#response").removeClass("success-msg").addClass("error-msg").html("All fields are required.");

                    setTimeout(function() {
                        $("#response").fadeOut("slow");
                    }, 4000);
                } else {
                    // $("#response").html($("#submit_form").serialize());

                    $.ajax({
                        url: "save-form.php",
                        type: "POST",
                        data: $("#submit_form").serialize(),
                        beforesend: function() {
                            $("#response").fadeIn();
                            $("#response").removeClass("success-msg error-msg").addClass("process-msg").html("Loading response...");
                        },
                        success: function(data) {
                            $("#submit_form").trigger("reset");
                            $("#response").fadeIn();
                            $("#response").removeClass("error-msg").addClass("success-msg").html(data);

                            setTimeout(function() {
                                $("#response").fadeOut("slow");
                            }, 4000);
                        }
                    });
                }
            });
        });
    </script>
</body>

</html>







Below is save-form.php File.
<?php

include("mysqli_conn.php");

$name = $_POST["fullname"] ?? null;
$age = $_POST["age"] ?? null;
$gender = $_POST["gender"] ?? null;
$country = $_POST["country"] ?? null;

$sql = "INSERT INTO students(name, age, gender, country) VALUES('{$name}',$age,'{$gender}','{$country}')";

if ($conn->query($sql) == TRUE) {
    echo "Hello {$name}, your record is saved.";
} else {
    echo "Can't save form data.";
}








Below is css/style.css File.
body {
    font-family: arial;
    background: #b2bec3;
    padding: 0;
    margin: 0;
}

h1 {
    text-align: center;
    font-size: 40px;
    margin: 0;
}

#main {
    width: 700px;
    margin: 20px auto;
    background: #fff;
    font-size: 18px;
}

#header {
    background: #6c5ce7;
    color: #fff;
    padding: 15px;
}

#table-data {
    padding: 15px;
    min-height: 400px;
}

table tr td:first-child {
    text-align: right;
    font-weight: bold;
}

input[type="text"],
input[type="number"],
select {
    width: 200px;
    height: 25px;
    font-size: 17px;
    padding: 3px;
}

input[type="number"] {
    width: 60px;
}

input[type="button"] {
    background: #6c5ce7;
    color: #fff;
    border: 0;
    border-radius: 3px;
    padding: 5px 10px;
    outline: 0;
    cursor: pointer;
}

#response {
    width: 70%;
    margin: 15px auto;
    padding: 15px;
    border-radius: 5px;
}

.error-msg {
    background: #f2dedf;
    color: #9c4150;
    border: 1px solid #e7ced1;
}

.success-msg {
    background: #e0efda;
    color: #407a4a;
    border: 1px solid #c6dfb2;
}

.process-msg {
    background: #d9edf6;
    color: #377084;
    border: 1px solid #c8dce5;
}






Comments

Post a Comment

Popular posts from this blog

Logical_Operators

  <?php     $age = 20 ;     $age1 = 25 ;     if ( $age >= 18 && $age <= 21 )     {         echo "You are Eligible<br>" ;     }         if ( $age >= 18 || $age <= 21 )     {         echo "You are Eligible<br>" ;     }     //Below condition is True So that "Not Operator(!)" will return False condition     if (!( $age >= 18 ))     {         echo "You are Eligible<br>" ;     }     //Below condition is False So that "Not Operator(!)" will return True condition     if (!( $age <= 18 ))     {         echo "You are Eligible<br>" ;     }     //If both condition is "True" OR "False" at that time xor will return "False" and if one condition is     //"True" and s...
Read more

SubQuery with EXISTS and NOT EXISTS in PHP

 SELECT with SubQuery Syntax : SELECT columns FROM table1 WHERE column = (SELECT columns FROM table2 WHERE condition); In "personal" table, there are 6 columns named id, name, percentage, age, gender, city. In "personal" table, column name "id" is PRIMARY KEY and column name "city" is FOREIGN KEY. In "courses" table, there are 2 columns named course_id and course_name. In "courses" table, column name "course_id" is PRIMARY KEY. In "city" table, there are 2 columns named cid and cityname. In "city" table, column name "cid" is PRIMARY KEY. If we want to select records from "personal" table who belong to Delhi from "city" table using SubQuery then we can use below shown sql query : SELECT name FROM personal WHERE city = (SELECT cid FROM city WHERE cityname = "Delhi"); If we want to select records from "personal" table who belong to Delhi and Agra from...
Read more

Get Functions

  <?php //There are many Get Functions in PHP as shown below: //get_class, get_parent_class, get_class_methods, get_class_vars, get_object_vars, get_called_class, //get_declared_classes, get_declared_interfaces, get_declared_traits, class_alias class ParentClass {     function name ()     {         echo "Class Name : " . get_class ( $this ) . "<br>" ;   //Print the particualr Class Name         //Print the particular Parent Class Name as shown below:         echo "Parent Class Name : " . get_parent_class ( $this ) . "<br>" ;     } } class ChildClass extends ParentClass {     function __construct ()     {}     function myfunction ()     {}     function myfunction2 ()     {} } $obj = new ChildClass (); $obj -> name (); echo "Class Name is : " . get_class ( $obj ) . "<br>" ; echo "Paren...
Read more