Skip to content

Instantly share code, notes, and snippets.

@veedeoo
Forked from havvg/ajax-form.js
Last active August 29, 2015 14:05
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save veedeoo/9ed4a5a40825d8e4b323 to your computer and use it in GitHub Desktop.
jQuery(function($) {
$('form[data-async]').on('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();
});
});
<a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal">Launch Demo Modal</a>
<!-- Bootstrap trigger to open modal -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<form class="form-horizontal well" data-async data-target="#result" action="<?php echo $base_url(); ?>modalcontroller/modal_response" method="POST">
<fieldset>
<!-- form content -->
<label>Test</label><input type="text" name="text"/>
<input type="submit" name="submit" value="submit">
</fieldset>
</form>
<!-- this is our target div where the response from the controller's method will show up -->
<div id="result"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- end of test modal -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment