Logging in via modal using AJAX and PHP <p>to be fair, I'm fairly new in the AJAX area (newbie to be more precise) and i think that i took quite a large bite entering that field.So, I'm struggling for a several days now trying to implement AJAX with my PHP script. Before you flag this question as duplicate please consider that I've tried every posted question from this site and not one solution pop out. That being said, here is what I want to achieve: I want to show some sort of message after PHP script was successful or unsuccessful, something like picture below:</p> <p><a href="https://i.stack.imgur.com/z9lza.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z9lza.png" alt="enter image description here"></a></p> <p>If there was successful show me msg, and redirect me (after 2 sec) to admin site, and if not show me error!</p> <p>So, here is code for modal form:</p> <pre><code>&lt;div class="modal fade" id="test" role="dialog"&gt; &lt;div class="modal-dialog"&gt; &lt;!-- Modal content--&gt; &lt;div class="modal-content"&gt; &lt;div class="modal-header"&gt; &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt; &lt;h4 class="modal-title"&gt;test&lt;/h4&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;form id="myform" method="POST" role="form"&gt; &lt;div class="form-group"&gt; &lt;label for="user"&gt;User:&lt;/label&gt; &lt;input name="user" type="text" class="form-control" placeholder="Unesi korisnika"&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="pass"&gt;Password:&lt;/label&gt; &lt;input name="pass" type="password" class="form-control" placeholder="Unesi lozinku"&gt; &lt;/div&gt; &lt;div id="error"&gt; &lt;div class="alert alert-danger"&gt; &lt;strong&gt;Error, try again!&lt;/strong&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="thanks"&gt; &lt;div class="alert alert-success"&gt; &lt;strong&gt;Logging in..&lt;/strong&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="modal-footer"&gt; &lt;button type="button" class="btn btn-default" id="reset" data-dismiss="modal"&gt;Close&lt;/button&gt; &lt;button type="submit" class="btn btn-success" id="submitForm"&gt;Login!&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p></p> <p>Here is my javascript block of code: Here I tried loging in using my php script but nothing happens, it's only showing me <strong>#thanks</strong> div when I start typing</p> <pre><code>$('#test').on('hidden.bs.modal', function () { $(this).removeData('bs.modal'); $(':input', '#myform').val(""); }); $("#thanks").hide(); $("#error").hide(); $("#myform").click(function (e) { var url = "login.php"; $.ajax({ type: "POST", url: url, data: $('#myform').serialize(), success: $("#thanks").show(), error: function () { $("#error").show(); } }); e.preventDefault(); }); </code></pre> <p>Here is my PHP <strong>doLogin()</strong> function inside myAuth class:</p> <pre><code>static function doLogin() { if( !empty($_POST['user']) &amp;&amp; !empty($_POST['pass']) ) { if(!session_id()) session_start(); // check and retrive user with sended pass $user = self::_fetchUserWithPassDB(); // if user found log in if($user) { // security $token = md5(rand(100000,999999)); // save token in session $_SESSION["auth"] = $token; // save user in session $_SESSION["user"] = $user[0]["user"]; // save role in session $_SESSION["role"] = $user[0]["role"]; // postavi validity and token in cookie, session in base self::_setCookieSessionDBTokenValidity(); // redirect on admin.php header( "refresh:2;url=admin.php" ); } else { header('Location:index.php'); } if(!$user) { header("refresh:1;url=index.php" ); } } // od if POST </code></pre> <p>and finally here is my <strong>login.php</strong></p> <pre><code>&lt;?php // login.php require_once('init.php'); myAuth::doLogin(); ?&gt; </code></pre> <p>Is it problem in in <strong>doLogin</strong>() function or is there problem with javascript, I really don't know? If there is any help, when I use this script without AJAX it works normal without any problems.</p> <p>Like this:</p> <pre><code>&lt;form action="login.php" id="myform" method="POST" role="form"&gt; ....&lt;!--rest of the modal form--&gt; </code></pre> <h2><strong>UPDATE 1.</strong></h2> <p>I've tried something like this, but it does not work. Also, I've removed redirect from doLogin () and added in AJAX call but without any luck</p> <pre><code>$("#myform").submit(function(e) { var url = "login.php"; $.ajax({ type: "POST", url: url, data: $('#myform').serialize(), success: function() { $("#thanks").show(), setTimeout(function() { window.location.href = "admin.php"; }, 2000); }, error: function() { $("#error").show(); } }); e.preventDefault(); }); </code></pre>