Submit Form Using Bootstrap Modal

In this tutorial we will see how to submit form using bootstrap modal dialog and view back the results in the same dialog. Form will be sent through Ajax and processed by a PHP script.

The animation below shows the result we want to achieve:
 
submit form using bootstrap modal

The backend PHP file

In this simple PHP file we get two variables called ‘first_name’ and ‘last_name’ that correspond to the input names of a form.

<?php
	$first_name = $_POST['first_name'];
	$last_name = $_POST['last_name'];
	echo "Thank you " . $first_name . " " . $last_name . " for your submission.";
?>

I named this file test.php and I placed it inside htdocs\onlinejson\test.php.

Submit Form Using Bootstrap Modal

Now that we have our tool to process the form let’s create the modal.

Create a html file and inside the tags place these includes.

<!-- necessary scripts for the dialog -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Inside the tag we will add a button and the div that represents the modal.

Highlighted below is our form that we are going to submit. Pay attention to the “action” tag. It has the url to our PHP file. Also mind the “method=POST” attribute.

Btw, you could use http://localhost/onlinejson/test.php. We just used a relative path here.

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#contact_dialog">Contact</button>
	
<!-- the div that represents the modal dialog -->
<div class="modal fade" id="contact_dialog" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Enter your name</h4>
			</div>
				<div class="modal-body">
					<form id="contact_form" action="/onlinejson/test.php" method="POST">
						First name: <input type="text" name="first_name"><br/>
						Last name: <input type="text" name="last_name"><br/>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" id="submitForm" class="btn btn-default">Send</button>
				</div>
			</div>
		</div>
	</div>

Now we just need some javascript to submit the form. Write this inside the tag just below the includes we inserted earlier.

<script>
/* must apply only after HTML has loaded */
$(document).ready(function () {
	$("#contact_form").on("submit", function(e) {
		var postData = $(this).serializeArray();
		var formURL = $(this).attr("action");
		$.ajax({
			url: formURL,
			type: "POST",
			data: postData,
			success: function(data, textStatus, jqXHR) {
				$('#contact_dialog .modal-header .modal-title').html("Result");
				$('#contact_dialog .modal-body').html(data);
				$("#submitForm").remove();
			},
			error: function(jqXHR, status, error) {
				console.log(status + ": " + error);
			}
		});
		e.preventDefault();
	});
	
	$("#submitForm").on('click', function() {
		$("#contact_form").submit();
	});
});
</script>

What we did:

  1. We serialize the form so that we can send it’s content through Ajax (line 5).
  2. We get the url of the form to know where we send the Ajax request.
  3. We configure the $.ajax object with two functions:
    • success: that gets called when the request went OK.
    • error: gets called when an error occurred.

In the success function on the first line we change the modal header title to “Result”. Then we change it’s body to the output made by the PHP file.
We also remove the #submitForm button because it will no longer make sense when we display the result.

On the highlighted lines you can see we also need to add an action for the Send button on the dialog. What this does is to submit the form (thus calling the on.(“submit”…) above).

Complete HTML file to submit form using bootstrap modal:

Complete index.html
<html>
	<head>
		<!-- necessary scripts for the dialog -->
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
	/* must apply only after HTML has loaded */
	$(document).ready(function () {
		$("#contact_form").on("submit", function(e) {
			var postData = $(this).serializeArray();
			var formURL = $(this).attr("action");
			$.ajax({
				url: formURL,
				type: "POST",
				data: postData,
				success: function(data, textStatus, jqXHR) {
					$('#contact_dialog .modal-header .modal-title').html("Result");
					$('#contact_dialog .modal-body').html(data);
					$("#submitForm").remove();
				},
				error: function(jqXHR, status, error) {
					console.log(status + ": " + error);
				}
			});
			e.preventDefault();
		});
		
		$("#submitForm").on('click', function() {
			$("#contact_form").submit();
		});
	});
</script>
	</head>
	<body>

		<button type="button" class="btn btn-info" data-toggle="modal" data-target="#contact_dialog">Contact</button>
	
		<!-- the div that represents the modal dialog -->
		<div class="modal fade" id="contact_dialog" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">Enter your name</h4>
					</div>
					<div class="modal-body">
						<form id="contact_form" action="/onlinejson/test.php" method="POST">
							First name: <input type="text" name="first_name"><br/>
							Last name: <input type="text" name="last_name"><br/>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button type="button" id="submitForm" class="btn btn-default">Send</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
FacebookTwitterLinkedin