Skip to content

Instantly share code, notes, and snippets.

@RodrigoPauletti
Forked from havvg/ajax-form.js
Created May 3, 2018 12:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RodrigoPauletti/a6a1644a94bad0a5ce0199c24a6ea1cc to your computer and use it in GitHub Desktop.
Save RodrigoPauletti/a6a1644a94bad0a5ce0199c24a6ea1cc to your computer and use it in GitHub Desktop.
jQuery AJAX form submit with Twitter Bootstrap modal
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();
});
});
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment