Skip to main content

Bootstrap Modal Form Submit with Ajax & PHP

In this tutorial you will learn how to submit Bootstrap Modal Form using Ajax and process form data with PHP. The tutorial explained in very easy steps with live demo and download complete script link.

So let’s start the coding.

Steps1: Include Bootstrap and JavaScript Files
In this tutorial we have created HTML using Bootstrap, so included Bootstrap files and jQuery in head tag in index.php.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script/feedback.js"></script>

Steps2: Create Form HTML with Button
In index.php, we will create Bootstrap Modal with Form and a Button to open Modal Form.
<div id="feedback"><button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#feedback-modal">Feedback Modal Form</button></div>
<div id="feedback-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Send Feedback</h3>
</div>
<div class="modal-body">
<form class="feedback" name="feedback">
<strong>Name</strong>
<br />
<input type="text" name="name" class="input-xlarge" value="Laeeq">
<br /><br /><strong>Email</strong><br />
<input type="email" name="email" class="input-xlarge" value="phpzag@gmail.com">
<br /><br /><strong>Message</strong><br />
<textarea name="message" class="input-xlarge">Thanks for tutorials and demos!</textarea>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="submit">Send</button>
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>

Steps3: Handle Modal Submit with jQuery Ajax
Here in form_process.js, we have handled modal form submit using jQuery Ajax and post form data to server end to feedback.php. Also display response data on page after modal form process.
$(document).ready(function(){
$("button#submit").click(function(){
$.ajax({
type: "POST",
url: "feedback.php",
data: $('form.feedback').serialize(),
success: function(message){
$("#feedback").html(message)
$("#feedback-modal").modal('hide');
},
error: function(){
alert("Error");
}
});
});
});

Steps4: Process Modal Form Data at Server End
In feedback.php, we will get form submitted post data. Now we can send/store feedback form data. Here in this example, we have send back form details with message.

<?php
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['email']);
$message = strip_tags($_POST['message']);
echo "<strong>Name</strong>: ".$name."</br>";
echo "<strong>Email</strong>: ".$email."</br>";
echo "<strong>Message</strong>: ".$message."</br>";
echo "<span class='label label-info'>Your feedback has been submitted with above details!</span>";
}
?>

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download

Leave a Reply

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

Shares