Signup with Bootstrap Modal using jQuery AJAX in PHP

Tech Area
December 23, 2023

In this tutorial, We will learn how to signup with modal using JQuery AJAX in PHP.

Files used in this tutorial:

1- connection.php (database connection file)

2- index.php (registration form)

3- register-data.php (insert data)

Below are the step by step process of how to create bootstrap modal for signup 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";
$conn = mysqli_connect("$server","$username","$password");
$select_db = mysqli_select_db($conn, $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 register new user with bootstrap modal using AJAX in PHP and MySQL.

This screenshot shows the registration form using bootstrap modal.

index.php

<html>  
<head>  
  <title>Registration Form</title>  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.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;
 }
 .msg
{
  color: red;
  font-weight: 700;
} 
</style>
<body>  
<div class="container">
  <h2>Click for Register</h2>
  <!-- Button to Open the Modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    SignUp
  </button>
<!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Registration Form</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- Modal body -->
      <div class="modal-body">
      <div class="box">
      <div class="form-group">
       <label for="name">Enter Your Name</label>
       <input type="text" name="name" id="name" placeholder="Enter Name" required class="form-control"/>
      </div>  
      <div class="form-group">
       <label for="email">Enter Your Email</label>
       <input type="email" name="email" id="email" placeholder="Enter Email" required class="form-control"/>
      </div>
      <div class="form-group">
       <label for="password">Enter Your Password</label>
       <input type="password" name="pwd" id="pwd" placeholder="Enter Password" required class="form-control"/>
      </div>
      <div class="form-group">
       <label for="gender">Gender</label><br>
       <input type="radio" name="gender" id="gender" value="Male" required> Male
       <input type="radio" name="gender" id="gender" value="Female" required> Female
      </div>
      <div class="form-group">
       <input type="submit" id="register" name="register" value="Submit" class="btn btn-success"/>
      </div>
       <p class="msg"></p>
      </div>
      </div>  
      </div>
    </div>
  </div> 
</div>
</body>  
</html>

Now use jquery AJAX script.

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#register").on("click", function(){
      var name = $("#name").val();
      var email = $("#email").val();
      var password = $("#pwd").val();
      var gender = $('input[type="radio"]:checked').val();
      if(name=='' || email=='' || password=='')
      {
        $(".msg").html("All fields are required!");
      }
      else if($("#gender:checked").length==0)
      {
        $(".msg").html("Gender is required!");
      }
      else
      {
        $.ajax({
          url: 'register-data.php',
          method: 'post',
          data: {name: name, emailid: email, pwd: password, gender: gender},
          success: function(data){
            $(".msg").html(data);
          }
        });
      }
    });
  });
</script>

Step 3: Create new file for register user data

In this step, create a new file register-data.php. This file used to register new user.

<?php
require_once('connection.php');
$name = mysqli_real_escape_string($conn, $_POST['name']);
$email = mysqli_real_escape_string($conn, $_POST['emailid']);
$pwd = md5(mysqli_real_escape_string($conn, $_POST['pwd']));
$gender = mysqli_real_escape_string($conn, $_POST['gender']);

$insert_query = mysqli_query($conn,"insert into tbl_registration set name='$name', emailid='$email', password='$pwd', gender='$gender'");
if($insert_query>0)
{
	echo "Registration Successful!";
}
else
{
	echo "Error!";
}
?>

Download Source Code