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:

• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• Bootstrap Contact Form with Captcha using Ajax and PHP
• Multi Select Dropdown with Checkbox using Bootstrap, jQuery and 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 may also like:

• Build Live Chat System with Ajax, PHP & MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Invoice System with PHP & MySQL
• Push Notification System with PHP & MySQL
• Create Bootstrap Cards with PHP and MySQL
• Build Content Management System with PHP & MySQL
• Convert Unix Timestamp To Readable Date Time in PHP
• Ajax Drop Down Selection Data Load with PHP & MySQL
• Inventory Management System with Ajax, PHP & MySQL
• Drag and Drop File Upload using jQuery and PHP
• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL

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