<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Bootstrap trigger to open modal --> <a data-toggle="modal" href="#rating-modal">Write a Review</a> <div class="hide fade modal" id="rating-modal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h2>Your Review</h2> </div> <div class="modal-body"> <!-- The async form to send and replace the modals content with its response --> <form class="form-horizontal well" data-async data-target="#rating-modal" action="" method="POST"> <fieldset> <table> <tr> <td>Name:</td> <td><input name="name" type="text"></input></td> </tr> <tr> <td>Email:</td> <td><input name="email" type="text"></input></td> </tr> <tr> <td>Phone:</td> <td><input name="phone" type="text"></input></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit"></input></td> </tr> </table> </fieldset> </form> </div> <div class="modal-footer"> <a href="#" class="btn" data-dismiss="modal">Cancel</a> </div> </div>

jQuery(function($) { $('form[data-async]').live('submit', function(event) { var $form = $(this); var $target = $($form.attr('data-target')); $.ajax({ type: $form.attr('method'), url: $form.attr('action'), data: $form.serialize(), success: function(data, status) { $target.html(data); } }); event.preventDefault(); }); });