Bootstrap模式電子郵件形式

我已經搜索了一個答案，但找不到任何。也許這裏的某個人可以指點我正確的方向。Bootstrap模式電子郵件形式

我有一個簡單的模態窗體（bootstrap）。它意味着像這樣工作。

您輸入表單並單擊發送。表單信息被髮送到電子郵件地址。當郵件發送時，顯示帶有確認的新模式。

到目前爲止，我有這樣的：模態：

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

} ）;

但我需要通過郵件發送輸入和發送信息回模態的幫助作爲確認。

我試圖自己解決這個問題好幾天了，但現在我已經放棄了。

來源

2013-03-28 Magnus

如果您使用的是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查找有關打開新模式的文檔。

沒有運行，所以可能會出現拼寫錯誤。

來源

2013-05-08 18:35:50 PhilH

Bootstrap模式電子郵件形式

回答

相關問題