Bootstrap modal email form - ajax

Question

I've searched for an answer but could not find any. Maybe someone here can point me to the right direction.
I have a simple modal form (bootstrap). It's meant to work like this.
You enter the form and click Send. The form-info is sent to e-mailadress. When mail is sent new modal with confirmation is displayed.
I've tried to implement this solution: Bootstrap Modal ajaxified
So far i have this:
The modal:
<div class="hide fade modal" id="input-modal">
<form class="form-horizontal well" data-async data-target="#input-modal" action="/some-endpoint" method="POST">
<fieldset>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<label>Name</label>
<input id="name" type="text" placeholder="Type your name...">
</div>
<div class="modal-footer">
Cancel
<button type="submit" class="btn btn-primary" value="send"/>Send</button>
</div>
</fieldset>
</form>
The Javascript:
jQuery(function($) {
$('body').on('submit','form[data-async]', function(event) {
alert('submit 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();
});
});
But I need help with sending the input by mail and also sent info back to modal as a confirmation.
I've tried to solve this by myself for several days now, but now I've given up.

Answer 1

If you're using jQuery >= 1.5 look at the documentation here. This will provide you with a place to handle your new modal when the AJAX call returns. So your code would look something like this.
jQuery(function($) {
$('body').on('submit','form[data-async]', function(event) {
alert('submit Event');
var $form = $(this);
var $target = $($form.attr('data-target'));
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize()
}).done(function(data){
//pop your modal here
$('#your-new-modal').modal('show')
});
event.preventDefault();
});
This is assuming you plan to send the email server side as you can't send it from Javascript. In your example you would have changed the HTML content of the tag to the data returned from the AJAX call instead of opening a new modal. You can find documentation on opening the new modal via Javascript here.
Did not run this so there may be typos.