Question

我在模态中登录表单。提交表单后，我收到成功或失败的消息。表示失败消息。但是当我重新打开模态时，相同的消息出现而不是登录表单。刷新页面后，只有模态显示登录表单。

这是我的代码....请帮助我如何解决它，以便在我提交后重新打开模式时显示登录表单。

    <!--  Sign in feature starts here --> 
<div id="sign_in" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Sign In</h4>
      </div>
      <div class="modal-body">
<div class="panel-body" id="form">
 <form class="form-horizontal" role="form" method="post" id="log-in" >
  <fieldset>
                                <div class="form-group">
                               <input class="form-control" id="username" placeholder=" Username or Mobile No." type="text" autofocus  AutoComplete=off required>
                                </div>
                                <div class="form-group">
                               <input class="form-control" id="password" placeholder=" Enter Password" type="password" autofocus  AutoComplete=off required>
                                </div>
                                 <!-- Change this to a button or input when using this as a form -->
                                <button class="btn btn-lg btn-success btn-block" type="submit">Sign In</button>
                            </fieldset>
  </form> </div>
</div>
          </div> 
</div></div>
 <!--  Sign In feature ends here -->
<script type="text/javascript">
$(document).ready(function()
{   
    $(document).on('submit', '#log-in', function()
    {
        var data = $(this).serialize();
        $.ajax({
        type : 'POST',
        url  : '<?php echo site_url('verifylogin');?>',
        data : data,
        success :  function(data)
                   {                        
                        $("#log-in").fadeOut(500).hide(function()
                        {
                            $("#form").fadeIn(500).show(function()
                            {
                                $("#form").html(data);
                                if(data != null && data == "success"){ //redirect...
                        window.location.replace('home.php');
                }
                            });
                        });

                   }
        });

        return false;
    });
});
</script>

Answer 1

问题发生在$("#form").html(data); 为什么要删除表单HTML并将其替换为您收到的数据？

您何时将表单HTML放回模态中？它在刷新后工作，因为页面再次加载。

在上一个案例中，您更新了DOM，删除了表单HTML并将其替换为您收到的数据。因此，下次打开模态时，您将看到相同的数据。

Answer 2

尝试更改此部分

 $("#form").html(data);
 if(data != null && data == "success")
 { //redirect...
       window.location.replace('home.php');
 }

要

 $("#form").html(data);

即。删除这一部分

 if(data != null && data == "success")
 { //redirect...
       window.location.replace('home.php');
 }

还要在代码中的某处添加此div; 这是从PHP代码返回结果的div。

<div id="form"></div>

如果重定向是您的成功。然后在PHP代码中添加成功定义中的重定向代码，即

<?php

echo 'please wait! redirecting...';
echo "<script>window.location.href='home.php';</script>";

?>

Ajax不了解PHP的成功意味着什么。失败可能是另一个人的成功和另一个人的失败。

在您的问题中，如果有人输入错误的用户名或密码。它可能会重定向因为这也是成功的。

希望这有帮助

如何在通过AJAX提交后显示模态表单

2 个答案: