How to use sweetalert using AJAX in PHP and MySQL

• Tech Area
• June 19, 2024

In this post, We will discuss how to use javascript sweetalert in website using AJAX in PHP and MySQL. If you want to show beautiful alert box, then you can achieve this task using javascript sweetalert.

Files used in this tutorial:

1- connection.php (database connection file)

2- index.php (registration form)

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

Below are the step by step process of how to display sweetalert using AJAX in PHP and MySQL.

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 a file for registration form

Now create a new file index.php This is the main file used for registration form and display sweetalert.

This screenshot shows the registration form.

index.php

First of all include necessary CSS and JavaScript library.

<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://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Now create HTML for registration form.

<div class="container">  
    <div class="table-responsive">  
    <h3 align="center">Registration Form</h3>
     <div class="box">
      <form method="post">
      <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" class="form-control"></textarea> 
      </div>
      <div class="form-group">
       <input type="submit" id="register" name="register" value="Submit" class="btn btn-success" />
      </div>
    </form>
     </div>
   </div>  
  </div>

Now use jquery AJAX script.

<script type="text/javascript">
  $(document).ready(function(){
    $("#register").click(function(e){
      e.preventDefault();
      var name = $("#name").val();
      var email = $("#email").val();
      var phone = $("#phone").val();
      var address = $("#address").val();
      $.ajax({
        url: 'insert-data.php',
        method: 'post',
        dataType: 'json',
        encode: true,
        data: {fullname: name, emailid: email, phone_no: phone, address: address},
        success: function(data)
        {
          if(data.success)
          {
            swal("Success!", data.message, "success");
          }
          else
          {
            swal("Error!", data.message, "error");
          }
        }
      });
    });
  });
</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 the database.

insert-data.php

<?php
include('connection.php');
$name = $_POST['fullname'];
$email = $_POST['emailid'];
$phone = $_POST['phone_no'];
$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 json_encode(array("success" => true, "message" => "Data submitted successfully."));
} 
else 
{
    echo json_encode(array("success" => false, "message" => "An error occurred!"));
}
?>