Bootstrap modal email form

Question

Я искал ответ, но не смог найти его. Может быть, кто-то здесь может указать мне в правильном направлении.

У меня есть простая модальная форма (бутстрап). Он должен работать так.

Вы введете бланк и нажмите Отправить. Форма-информация отправляется в адрес электронной почты. Когда почта отправляется, отображается новый модальный с подтверждением.

Я пытался осуществить это решение: Bootstrap Modal ajaxified

До сих пор у меня есть это: Модальное:

<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"> 
      <a href="#" class="btn" data-dismiss="modal">Cancel</a> 
      <button type="submit" class="btn btn-primary" value="send"/>Send</button> 
     </div> 
    </fieldset> 
</form> 

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(); 
}); 

});

Но мне нужна помощь в отправке ввода по почте, а также отправке информации обратно в модаль в качестве подтверждения.

Я пытался решить это самостоятельно в течение нескольких дней, но теперь я сдался.

Answer 1

Если вы используете jQuery> = 1.5, посмотрите документацию here. Это даст вам место для обработки вашего нового модального кода при возврате вызова AJAX. Таким образом, ваш код будет выглядеть примерно так.

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(); 
}); 

Предполагается, что вы планируете отправлять сервер электронной почты, поскольку вы не можете отправить его с Javascript. В вашем примере вы изменили бы содержимое HTML тега на данные, возвращаемые из вызова AJAX, вместо того, чтобы открывать новый модальный. Вы можете найти документацию об открытии нового модального кода через Javascript here.

Не запускайте это, чтобы могли быть опечатки.