Question

我正在尝试在模态窗口中创建一个登录表单。问题是当我点击登录按钮时，如果登录凭据错误，模式将关闭。用户需要再次单击登录按钮以查看模式和错误消息。

我该如何解决这个问题？

这是模态内容。

<div id="signin" class="modal fade">
  <div class="modal-dialog">
                <?php include "view/login.html";  ?>
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

login.html档案。

<section class="frontoffice" style="padding: 20px 0;">
    <div class="">
        <h3 class="text-center" style="font-weight:700">SIGN IN</h3>
        <div class="row">
        <form action="" method="POST">
            <div class="col-md-1">
            </div>
            <div class="col-md-10 request-form">
                <div class="form-area">
                    <div class="row">
                        <div class="col-md-12">
                            <input class="text-field" name="username" type="text" placeholder="Username*" style="width:100%">
                            <?php echo $unameerror; ?>
                            <input class="text-field" name="password" type="password" placeholder="Password*" style="width:100%">
                            <?php echo $passerror; ?>

                        </div>
                    </div>
                </div>
                <div class="row" style="margin:20px;">
                    <div class="col-md-12 text-center">
                        <input type="submit" value="SIGN IN" name="login" class="blueButton">
                    </div>
                </div>
            </div>
        <div class="col-md-1">
        </div>
        </form>
        </div>
    </div>
</section>

Javascript

<script type="text/javascript">
$(document).ready(function() {
    $("[rel='popup']").popover();
});

Answer 1

一旦按下，<input type='submit'/>会自动发布表单。所以按下按钮后页面应该刷新。您应该使用ajax发送表单并回发响应。它应该是这样的：

$(function(){

 $("form").on("submit", function(e){
  e.preventDefault();
  $.post("url", $(this).serialize(), function(response){
    //present errors
  }, "json");
  })
})

在php端，将响应设置为数组，并使用echo json_encode($array)显示结果。

希望我这次得到它：D

如何在按下按钮时禁用模态关闭

1 个答案: