Bootstrap Modal Form Submit with Ajax & PHP

Using form in modal is very user friendly way allows to display form to users to submit on same page. So if you’re looking for solution to use form in modal and submit from there, then you’re here at the right place.

In this tutorial you will learn how to submit Bootstrap Modal Form using Ajax and process form data with PHP.

Also, read:

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 may also like:


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

11 thoughts on “Bootstrap Modal Form Submit with Ajax & PHP

  1. THANK YOU,
    this worked quit well, how do i make the form submit with out reloading the page ?

Comments are closed.