speedlight · July 19, 2013 19:11 · Aug 1, 2012
diff --git a/ajax-form.js b/ajax-form.js
@@ -0,0 +1,18 @@
+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();
+    });
+});
diff --git a/form.html b/form.html
@@ -0,0 +1,22 @@
+<!-- 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="/some-endpoint" method="POST">
+      <fieldset>
+        <!-- form content -->
+      </fieldset>
+    </form>
+  </div>
+
+  <div class="modal-footer">
+    <a href="#" class="btn" data-dismiss="modal">Cancel</a>
+  </div>
+</div>