How to display modal form after submitting through AJAX

Question

I Have a login in form inside a modal. After submitting the form i am getting success or failure message..let's say failure message. But when i am reopening the modal same message is appearing instead of log in form. After refreshing the page only modal is showing the log in form.

Here is my code....please help me how can i fix it so it will show the log in form when i reopen the modal after submission.

    <!--  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

The problem is at $("#form").html(data); Why are you removing the form HTML and replacing it with the data you are receiving ?

When are you putting back the form HTML in the modal? It is working after refresh because the page is getting loaded again.

In the previous case you have updated the DOM, removed the form HTML and replaced it with data that you are receiving. So the next time you open the modal you will get to see the same data.

Answer 2

try to change this part

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

TO

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

ie REMOVE THIS PART

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

Also add this div somewhere in your code; This is the div that returns the result from your PHP code.

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

If redirecting is your success. Then add the redirecting code in your success definition in the PHP code ie

<?php

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

?>

Ajax does not understand what your PHP means by success. Failure might be success to another person and failure to another person.

In your question, if someone enters wrong username or password. it is likely to redirect Because that is also a success.

Hope this helps