Question

下面是模型框，我正在使用它进行登录。当我点击按钮（两个）页面时，只需重新加载它。我检查了萤火虫，发现了这样的东西。的本地主机\的index.php？提交=登录

<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");检查我的脚本是否正在按下按钮，但它无效。我认为这个事件没有解雇。

Answer 1

要在不重新加载整个页面的情况下提交模式，模式＆＃34;提交＆＃34;按钮需要调用javascript 而不是提交。然后javascript函数可以使用ajax来提交信息，如果成功，你可以做任何你需要的事情，比如关闭模态。

Bootstrap：表单提交不在模态框中

1 个答案: