jQuery AJAX form submit using twitter bootstrap modal

In this article we can see about submitting a form using twitter boostrap modal . Twitter bootstrap contains a modal which has responsive features and beautiful CSS styles.
Here we required two files:
» index.html
» process.php

Demo Download

Javascript and CSS files :

Include Jquery and Bootstrap files in index.html

<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

Form content :

Here modal is referred by div id “form-content” which is basically hidden while loading and the form is referred by class “contact”.

<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p></div>
	<!-- model content -->	
	<div id="form-content" class="modal hide fade in" style="display: none; ">
	        <div class="modal-header">
	              <a class="close" data-dismiss="modal">×</a>
	              <h3>Contact us</h3>
	        </div>
		<div>
			<form class="contact">
			<fieldset>
		         <div class="modal-body">
		        	 <ul class="nav nav-list">
				<li class="nav-header">Name</li>
				<li><input class="input-xlarge" value=" krizna" type="text" name="name"></li>
				<li class="nav-header">Email</li>
				<li><input class="input-xlarge" value=" user@krizna.com" type="text" name="Email"></li>
				<li class="nav-header">Message</li>
				<li><textarea class="input-xlarge" name="sug" rows="3"> Thanks for the article and demo
				</textarea></li>
				</ul> 
		        </div>
			</fieldset>
			</form>
		</div>
	     <div class="modal-footer">
	         <button class="btn btn-success" id="submit">submit</button>
	         <a href="#" class="btn" data-dismiss="modal">Close</a>
  		</div>
	</div>

Jquery code :

The below code will submit the form to process.php file and shows the processed results in the “thanks” div .

<script>
 $(function() {
//twitter bootstrap script
	$("button#submit").click(function(){
	        $.ajax({
    		type: "POST",
		url: "process.php",
		data: $('form.contact').serialize(),
        	success: function(msg){
 	                $("#thanks").html(msg)
 		       	$("#form-content").modal('hide');	
 		        },
		error: function(){
			alert("failure");
			}
      		});
	});
});
</script>

» process.php

The below php code will get the values from the form for processing .

<?php
if (isset($_POST['name'])) {
$name = strip_tags($_POST['name']);
$email = strip_tags($_POST['Email']);
$sug = strip_tags($_POST['sug']);
echo "Name		=".$name."</br>";	
echo "Email		=".$email."</br>";	
echo "Message		=".$sug."</br>";	
echo "<span class="label label-info" >your message has been submitted .. Thanks you</span>";
}?>

» index.html Full code :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery AJAX form submit using twitter bootstrap modal</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h4>Demo Page</h4>
	<div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p></div>
	<!-- model content -->	
	<div id="form-content" class="modal hide fade in" style="display: none; ">
	        <div class="modal-header">
	              <a class="close" data-dismiss="modal">×</a>
	              <h3>Contact us</h3>
	        </div>
		<div>
			<form class="contact">
			<fieldset>
		         <div class="modal-body">
		        	 <ul class="nav nav-list">
				<li class="nav-header">Name</li>
				<li><input class="input-xlarge" value=" krizna" type="text" name="name"></li>
				<li class="nav-header">Email</li>
				<li><input class="input-xlarge" value=" user@krizna.com" type="text" name="Email"></li>
				<li class="nav-header">Message</li>
				<li><textarea class="input-xlarge" name="sug" rows="3"> Thanks for the article and demo
				</textarea></li>
				</ul> 
		        </div>
			</fieldset>
			</form>
		</div>
	     <div class="modal-footer">
	         <button class="btn btn-success" id="submit">submit</button>
	         <a href="#" class="btn" data-dismiss="modal">Close</a>
  		</div>
	</div>
 </div>
<script>
 $(function() {
//twitter bootstrap script
	$("button#submit").click(function(){
		   	$.ajax({
    		   	type: "POST",
			url: "process.php",
			data: $('form.contact').serialize(),
        		success: function(msg){
 	          		  $("#thanks").html(msg)
 		        	$("#form-content").modal('hide');	
 		        },
			error: function(){
				alert("failure");
				}
      			});
	});
});
</script>
</body>
</html>