Bootstrap Modal Form Submit PHP MySQL

Bootstrap modal form submit using Ajax with PHP MySQL; In this tutorial, you will learn how to create a bootstrap modal form and submit it using Ajax jquery with PHP Mysql.

Bootstrap Modal Form Submit using Ajax in PHP MySQL

Steps to create a bootstrap form and submit it using Ajax jquery with PHP MySQL:

Step 1: Setting up the Database
Step 2: Connecting to the Database
Step 3: Handling Form Submission with PHP
Step 4: Create the Modal Form with Bootstrap
Step 5: Handling Form Submission with AJAX

Step 1: Setting up the Database

First of all, you need to create a MySQL database and table to store the data for your bootstrap form data. Open your preferred MySQL management tool (e.g., phpMyAdmin) and execute the following SQL query to create a table named users:

CREATE TABLE users (
  id INT(11) PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  email VARCHAR(255) NOT NULL,

);

PHP Signature Pad using Jquery Ajax Example

Step 2: Connecting to the Database

Next, you need to connect to the MySQL database using PHP. So, Create a new PHP file named submit.php and add the following code:

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

?>

Crop and Save Image Using jQuery Croppie and PHP

Step 3: Handling Form Submission with PHP

Now, you need to save or store bootstrap form data. So, you can use the following code. Add the following code after the database connection code in submit.php file:

<?php

$name = $_POST['name'];
$email = $_POST['email'];

$sql = "INSERT INTO your_table (name, email) VALUES ('$name', '$email')";

if ($conn->query($sql) === TRUE) {
    echo "Data inserted successfully!";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

Ajax Image Upload Using PHP and jQuery Without Refreshing Page

Step 4: Create the Modal Form with Bootstrap

Next, you need to create an HTML file named index.html and add the following code to create bootstrap form:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Modal Form Submission</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>

<!-- Button to trigger the modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open Modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Form</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="myForm" action="submit.php" method="POST">
          <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" name="name" required>
          </div>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" name="email" required>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

</body>
</html>

Send Reset Password Link Email PHP

Step 5: Handling Form Submission with AJAX

If you prefer to submit the form using AJAX for a smoother user experience, modify the JavaScript code in your HTML file. Add the following code after including the Bootstrap JavaScript:

<script>
$(document).ready(function() {
  $('#myForm').submit(function(e) {
    e.preventDefault(); // Prevent form submission

    $.ajax({
      type: 'POST',
      url: 'submit.php',
      data: $(this).serialize(),
      success: function(response) {
        // Display the response from the server
        alert(response);
        $('#myModal').modal('hide'); // Close the modal
      }
    });
  });
});
</script>

This code uses jQuery to handle the form submission event, serialize the form data, and send it to the submit.php file via AJAX. It then displays the response from the server and closes the modal.

Conclusion

By following this tutorial guide, you have learned how to create a Bootstrap modal form to submit data using AJAX in PHP script and store it in MySQL database.

Subscribe to Blog via Email