Bootstrap：表单提交在模态框中不起作用答案

【问题标题】：Bootstrap: Form submit not working in modal boxBootstrap：表单提交在模态框中不起作用
【发布时间】：2016-01-16 20:27:25
【问题描述】：

下面是模型框，我用它来登录。当我单击按钮（两个）页面时，只需自行重新加载。我检查了萤火虫，发现了类似的东西。 localhost\index.php?submit=Login

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <form method="post" id="login" name="login" action="login_exec.php" role="form">

        <div class="modal-content login-modal">
            <div class="modal-header login-modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <font color="#288DCB"><h3 class="modal-titles text-center" id="loginModalLabel">AUTHENTICATION</h3></font>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <div role="tabpanel" class="login-tab">
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active text-center" id="emphome">
                                &nbsp;&nbsp;
                                <span id="login_fail" class="response_error" style="display: none;">Loggin failed, please try again.</span>
                                <div class="clearfix"></div>

                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa fa-user"></i>
                                        </div>
                                        <input type="text" class="form-control" id="login_username" placeholder="Email Address" required="required">
                                    </div>
                                    <span class="help-block has-error" id="email-error"></span>
                                </div>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa fa-lock"></i>
                                        </div>
                                        <input type="password" class="form-control" id="password" placeholder="Password" required="required">
                                    </div>
                                    <span class="help-block has-error" id="password-error"></span>
                                </div>

                                <input type="submit" value="Login" id="submit" name="submit" class="btn btn-primary">
                                <button type="submit" value=" Send" class="btn btn-success" id="submit" />
                                <div class="clearfix"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

我无法找到它这样工作的原因。我尝试了按钮和输入类型，但结果相同。

这是我的 javascript 代码。

<script type="text/javascript">
$(document).ready(function () {
$("#login").on("submit", function(e) {      
        e.preventDefault;
 alert("failure");
    $.ajax({
        type: "POST",
        url: "logic_exec.php", //process to mail
        data: $('form.login').serialize(),
        success: function(msg){
            $("#thanks").html(msg) //hide button and show thank you
            $("#form-content").modal('hide'); //hide popup  
        },
        error: function(){
            alert("failure");
        }
    });
});
});
  </script>

我正在使用alert("failure"); 来检查我的脚本是否在单击按钮时起作用，但它不起作用。我认为这个事件没有触发。

【问题讨论】：

点击输入类型时firebug中会发布什么。记得在 firebug 控制台和 Net 选项卡中设置persist ON。
您是否使用了事件监听器，例如。 onclick 在提交按钮上？
您的模态代码可能存在于表单标签中，请检查。

标签： javascript php jquery html twitter-bootstrap

【解决方案1】：

要在不重新加载整个页面的情况下提交模式，模式“提交”按钮需要调用 javascript type="button" onclick="submitmyinfo();" 而不是提交。然后javascript函数可以使用ajax提交信息，如果成功，你可以做任何你需要的事情，比如关闭modal。

【讨论】：