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模式电子邮件形式

回答

相关问题