Question

尝试了每个google和stackoverflow结果后，我决定寻求你的帮助。

我正在构建一个Symfony2应用程序。在我的应用程序的每个视图中，我都包含一个twitter bootstrap模式元素，其中包含一个发送建议/问题邮件的表单。所以，从我的基础树枝模板，我包括这个隐藏的模态。

模态显示/解雇工作正常。 Modal根据需要包含我的表单。

我想从这里实现的是：AJAX提交表单，在控制器中发送邮件，响应视图。该响应是json，并且成功函数将模式的html更改为“* dismiss_button *”+“Email sent”或“发生了问题”。

似乎相当简单。好吧，在尝试了大多数解决方案后，我无法阻止表单提交。所以我决定保持它非常简单。

这里，模态代码：

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Send your suggestion</h3>
</div>
<div class="modal-body">
    {% if is_granted('ROLE_USER') %}<p>We will reply to {{ app.user.mail }}</p>
    {% else%}<p>Don't forget to include a reply-to email in your suggestion.</p>
    {% endif %}
    <form action="{{ path("mgfbc_arrt") }}" method="post" id="arrt">
        <div class="control-group">
            <label for="username">Text:</label>
            <div class="controls">
                <textarea id="mail" name="mail" rows="4" style="width:500px;"></textarea>
            </div>
        </div>
        <div class="modal-footer">
            <input type="submit" id="butt" class="btn btn-success" value="Send">
        </div>
    </form>
</div>

而且，JS：

<script type="text/javascript">
$("#butt").on('click', function(e) {
e.preventDefault();
});
</script>

尝试了所有内容之后，我已经达到了这个javascript不会阻止表单提交的程度。

我做错了什么？

提前致谢。

Answer 1

试试这个：

<form action="{{ path("mgfbc_arrt") }}" method="post" id="arrt">
    <div class="control-group">
        <label for="username">Text:</label>
        <div class="controls">
            <textarea id="mail" name="mail" rows="4" style="width:500px;"></textarea>
        </div>
    </div>
    <div class="modal-footer">
        <input type="submit" id="butt" class="btn btn-success" value="Send">
    </div>
</form>
<script type="text/javascript">
$("#arrt").submit(function(e) {
    e.preventDefault();
});
</script>

Answer 2

不要使用on（）函数，而是使用委托，试试这个：

$("#arrt").delegate("#butt", "click", function(e){
  e.preventDefault();              
});

Answer 3

@gomman查看以下文档：http://api.jquery.com/submit/ 我认为你需要取消表单元素的submit-event以使其按照你想要的方式工作。

@Fuser尽管delegate（）对我来说更具可读性，但使用on（）或delegate（）对于这种情况也是如此。引用jQuery文档＆＃34;从jQuery 1.7开始，.delegate（）已被.on（）方法取代。但是，对于早期版本，它仍然是使用事件委派的最有效方法。＆＃34;

表单AJAX发送一个twitter bootstrap模式（Symfony2）

3 个答案: