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">×</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
