Table of Contents
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
holaa