Bootstrap Modal Form Submit PHP MySQL

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,

);

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);
}

?>

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();
?>

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>

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.

Recommended Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *