Insert Data using Bootstrap Modal in PHP with AJAX Jquery

Tech Area
October 11, 2023

In this tutorial, We will learn how to insert data using bootstrap modal with Jquery AJAX in PHP and MySQL.

We are using Bootstrap Modal to insert record into database without page refresh.

Files used in this tutorial:

1- connection.php (database connection file)

2- index.php (table and AJAX script)

3- insert-data.php (insert data into database)

4- show-data.php (fetch data from database)

Below are the step by step process of how to insert data using modal and display data in table using Jquery AJAX.

Step 1: Create a Database connection

In this step, create a new file connection.php to create database connection.

connection.php

<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "college_db";
$connection = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($connection, $database);
if(!$select_db)
{
	echo("connection terminated");
}
?>

Step 2: Create index.php

In this step, create a new file index.php. This is the main file used to implement AJAX to insert and fetch data.

This screenshot shows the Bootstrap Modal.

index.php

<html>  
<head>  
    <title>Registration Form</title>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<style>
 .box
 {
  width:100%;
  max-width:600px;
  background-color:#f9f9f9;
  border:1px solid #ccc;
  border-radius:5px;
  padding:16px;
  margin:0 auto;
 }
 .error
{
  color: red;
  font-weight: 700;
} 
</style>
<body>  
    <div class="container">  
    <h2 class="text-center">Insert Data with Modal using Jquery AJAX</h2>
    <br/>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#adduser">Add New User</button>
    <br/><br/>
    <table class="table table-bordered">
    <thead>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <th>Phone</th>
      <th>Address</th>
      </thead>
    <tbody id="result">
    </tbody>
   </table>
  </div>
 </body>  
</html>
<!-- Modal -->
<div class="modal fade" id="adduser" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="box">
      <form>
      <div class="form-group">
       <label for="name">Enter Your Name</label>
       <input type="text" name="name" id="name" placeholder="Enter Name" class="form-control"/>
      </div>  
       <div class="form-group">
       <label for="email">Enter Your Email</label>
       <input type="text" name="email" id="email" placeholder="Enter Email" class="form-control"/>
      </div>
      <div class="form-group">
       <label for="phone">Enter Your Phone Number</label>
       <input type="text" name="phone" id="phone" placeholder="Enter Phone Number" class="form-control"/>
      </div>
      <div class="form-group">
       <label for="phone">Enter Your Address</label>
       <textarea name="address" id="address" placeholder="Enter Address" required class="form-control"></textarea> 
      </div>
    </form>
      <div class="form-group">
       <input type="submit" id="register" name="register" value="Submit" class="btn btn-success" />
        <button type="button" class="btn btn-danger" data-dismiss="modal" id="close_btn">Close</button>
       </div>
       <p class="error" id="err"></p>
     </div>
      </div>
      </div>
  </div>
</div>

Now use jquery AJAX script.

<script type="text/javascript">
  $(document).ready(function(){
    showdata();
   $("#register").on("click", function(e){
    var name = $("#name").val();
    var email = $("#email").val();
    var phone = $("#phone").val();
    var address = $("#address").val();
    $.ajax({
      url: 'insert-data.php',
      method: 'post',
      data: {fullname: name, emailid: email, phone: phone, address: address },
      success: function(data){
        $("#err").html(data);
        $("form").trigger('reset');
        showdata();
      }
    });

   });
  });

  function showdata(){
    $.ajax({
      url: 'show-data.php',
      method: 'post',
      success: function(result)
      {
        $("#result").html(result);
      }
    });
  }

  $(document).on("click","#close_btn",function(e){
    $('#err').html('');
  });
</script>

Step 3: Create new file for insert data

In this step, create a new file insert-data.php. This file used to insert data into database with bootstrap modal.

insert-data.php

<?php
include('connection.php');
$name = $_POST['fullname'];
$email = $_POST['emailid'];
$phone = $_POST['phone'];
$address = $_POST['address'];

$insert_query = mysqli_query($connection, "insert into tbl_registration set name='$name', email='$email', phone='$phone', address='$address'");
if($insert_query>0)
{
	echo "Data Submitted Successfuly!";
}
else
{
	echo "Error!";
}
?>

Step 4: Create new file for fetch data

In this step, create a new file show-data.php. This file used to fetch data from database into the table.

show-data.php

<?php
include("connection.php");
$fetch_query = mysqli_query($connection, "select * from tbl_registration");
$row = mysqli_num_rows($fetch_query);
if($row>0)
{
	while($res = mysqli_fetch_array($fetch_query))
	{?>
       <tr>
       	<td><?php echo $res['id']; ?></td>
       	<td><?php echo $res['name']; ?></td>
       	<td><?php echo $res['email']; ?></td>
       	<td><?php echo $res['phone']; ?></td>
       	<td><?php echo $res['address']; ?></td>
       </tr>
<?php	}
}
?>

Download Source Code

Fetch & Display JSON Data with Dropdown using AJAX in PHP & MySQL

Update Data using Bootstrap Modal in PHP with AJAX Jquery

Subscribe us via Email

Join 10,000+ subscriber

Subscribe on YouTube

PHP Projects

Student record system project in PHP and MySQL Last Updated: July 3, 2024

Food ordering system project in PHP and MySQL Last Updated: June 27, 2024

Tourism management system project in PHP and MySQL Last Updated: June 24, 2024

Restaurant table booking system project in PHP and MySQL Last Updated: February 22, 2024

Hostel management system project in PHP and MySQL Last Updated: February 14, 2024