Submit Form Using AJAX In PHP/MySQLi | Free Source Code

Submit Form using AJAX in PHP/MySQLi

March 21, 2021
PHP
Submit Form using AJAX in PHP/MySQLi

Tutorial: Submit Form using AJAX in PHP/MySQLi with Source Code

About How to Submit Form using AJAX in PHP/MySQLi

This tutorial will teach you on How to Submit Form using AJAX in PHP/MySQLi. The first code of this tutorial is serialized () function, which will convert our form to be ready to process into our AJAX.

Note: Scripts and CSS used in this tutorial are hosted; therefore, you need an internet connection for them to work.

Creating a Database

The first step is to create our database.

1. Open phpMyAdmin.

2. Click databases, create a database and name it as a sample.

3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.

CREATE TABLE `user` (
  `userid` INT(11) NOT NULL AUTO_INCREMENT,
  `firstname` VARCHAR(30) NOT NULL,
  `lastname` VARCHAR(30) NOT NULL,
  `username` VARCHAR(30) NOT NULL,
  `password` VARCHAR(30) NOT NULL,
  `address` VARCHAR(100) NOT NULL,
PRIMARY KEY(`userid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Creating a Connection

Next, we create our connection to our database. This will serve as the bridge between our forms and database. We name this as conn.php.

<?php
 
$conn = mysqli_connect("localhost","root","","sample");
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}
 
?>

index.php

We show our form in this page together with our sample user table to show that our form has been submitted via AJAX.

<!DOCTYPE html>
<html>
<head>
    <title>Submit Form using AJAX in PHP/MySQLi</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
    <style>
        .title{
            font-size:30px;
            color:blue;
        }
        .main{
            width:60%;
            padding:auto;
            margin:auto;
        }
        .h20{
            height:20px;
        }
        .h10{
            height:10px;
        }
        .desc{
            position:relative;
            top:6px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="h20"></div>
    <div class="well main">
        <div class="row">
            <div class="col-lg-12">
                <span class="title"><center>Submit Form using AJAX in PHP/MySQLi</center></span>
            </div>
        </div>
        <div class="h20"></div>
        <form id="form">
        <div class="row">
            <div class="col-lg-2">
                <span class="desc">Firstname:</span>
            </div>
            <div class="col-lg-10">
                <input type="text" name="firstname" class="form-control">
            </div>
        </div>
        <div class="h10"></div>
        <div class="row">
            <div class="col-lg-2">
                <span class="desc">Lastname:</span>
            </div>
            <div class="col-lg-10">
                <input type="text" name="lastname" class="form-control">
            </div>
        </div>
        <div class="h10"></div>
        <div class="row">
            <div class="col-lg-2">
                <span class="desc">Username:</span>
            </div>
            <div class="col-lg-10">
                <input type="text" name="username" class="form-control">
            </div>
        </div>
        <div class="h10"></div>
        <div class="row">
            <div class="col-lg-2">
                <span class="desc">Password:</span>
            </div>
            <div class="col-lg-10">
                <input type="password" name="password" class="form-control">
            </div>
        </div>
        <div class="h10"></div>
        <div class="row">
            <div class="col-lg-2">
                <span class="desc">Address:</span>
            </div>
            <div class="col-lg-10">
                <input type="text" name="address" class="form-control">
            </div>
        </div>
        </form>
        <div class="h10"></div>
        <div class="row">
            <div class="col-lg-12">
                <button type="button" class="btn btn-primary pull-right" id="submit">Submit</button>
            </div>
        </div>
    </div>
    <div class="h20"></div>
    <div class="row">
        <div id="table">
        </div>
    </div>
</div>
<script src="custom.js"></script>
</body>
</html>

custom.js

This script contains our fetch user and add user code. Also, you will see in this script how we serialize our form to be submitted.

$(document).ready(function(){
 
    showTable();
 
    $('#submit').click(function(){
        var form=$('#form').serialize();
        $.ajax({
            url:"add.php",
            method:"POST",
            data:form,
            success:function(){
                showTable();
                $('#form')[0].reset();
            } 
        });
    });
});
 
function showTable(){
    $.ajax({
        url:"fetch.php",
        method:"POST",
        data:{
            fetch: 1,
        },
        success:function(data){
            $('#table').html(data);
        }
    });
}

fetch.php

This is our PHP code in fetching user from our database to show in our table.

<?php
    include('conn.php');
    if(isset($_POST['fetch'])){
        ?>
        <table class="table table-bordered table-striped">
            <thead>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Username</th>
                <th>Password</th>
                <th>Address</th>
            </thead>
            <tbody>
                <?php
                    $query=mysqli_query($conn,"select * from user order by userid desc");
                    while($row=mysqli_fetch_array($query)){
                    ?>
                    <tr>
                        <td><?php echo $row['firstname']; ?></td>
                        <td><?php echo $row['lastname']; ?></td>
                        <td><?php echo $row['username']; ?></td>
                        <td><?php echo $row['password']; ?></td>
                        <td><?php echo $row['address']; ?></td>
                    </tr>
                    <?php
                    }
                ?>
            </tbody>
        </table>
        <?php	
    }
?>

add.php

Lastly, our code in adding new row to our database from the form that we serialize and submitted via AJAX.

<?php 
    include('conn.php');
    if(isset($_POST['firstname'])){
        $firstname=$_POST['firstname'];
        $lastname=$_POST['lastname'];
        $username=$_POST['username'];
        $password=$_POST['password'];
        $address=$_POST['address'];
 
        mysqli_query($conn,"insert into user (firstname, lastname, username, password, address) values ('$firstname', '$lastname', '$username', '$password', '$address')");
    }
?>

That ends this tutorial. If you have any comments or questions, feel free to write it below or message me and I will answer it to the best of my ability. Happy Coding!


Related Tutorials: Add Form Fields Dynamically using AngularJS with PHP/MySQLi, Submit POST Data to MySQLi Using AngularJS in PHP, Multiple Form Inputs in PHP, Image Upload using Ajax in PHP, Send POST Request Using Ajax in PHP, Load More Data using AJAX and jQuery in PHP/MySQLi, How to Upload an Image using AJAX in PHP and MySQLi, Facebook-Like Notification using AJAX, Bootstrap, and PHP

Download Here
Facebook Comments

Leave a Reply

Your email address will not be published.