Ajax- redirect when success

Question

I am trying to make a validation for login form. What I am doing is to check in database for username and password and if that user doesn't exists to show a message, if it exists redirect to index.php. I have done this using Ajax but the problem is that it shows me the message of failure, but when try to login as an existing user it shows this error at inspect element

Uncaught TypeError: Cannot call method 'append' of null jquery-1.9.1.js:7985 and Uncaught TypeError: Cannot read property 'settings' of undefined jquery.validate.js:332

script.js :

 $('#login_form').on('submit', function(e) {
        e.preventDefault();

        var username = $('#login_form input[name=username]').val();
        var password = $('#login_form input[name=password]').val();

        $.ajax({
          url: "login.php",
          type: "POST",
          data: {username: username,
                password: password},
          success: function(response) {
                 $('#invalid_content').html(response);  
                }
        });

        });

login_form.php

<form id="login_form" action="login.php" method="post">
        <div id="invalid_content" style="color: red"></div><br>
        <div class="control-group">
        <input autofocus id="username" name="username" placeholder="Username" type="text"/>          
           </div><br>
        <div class="control-group">
        <input id ="password" name="password" placeholder="Fjalekalimi" type="password"/>
        </div><br>
        <div class="control-group">
        <button type="submit" class="btn">Log In</button>
         </div>
        <br>                    
</form>

login.php

if ($_SERVER["REQUEST_METHOD"] == "POST")
    {      
        $rows = query("SELECT * FROM users WHERE username = ?", $_POST["username"]);

        if (count($rows) == 1)
        {
            $row = $rows[0];                            

            if (crypt($_POST["password"], $row["hash"]) == $row["hash"])
            {
                $_SESSION["id"] = $row["id"];                       
                echo json_encode(array('msg'=>"Success.", 'url'=>"/kinema/html/index.php", 'status'=>true));
            }


        }
        else if (($_POST["password"], $_POST["username"]) == null){
          echo json_encode(array('msg'=>"Username ose fjalekalimi jane te pavlefshem.", 'url'=>"", 'status'=>false));
        }
    }
    else
    {               
        echo json_encode(array('msg'=>"Username ose fjalekalimi jane te pavlefshem.", 'url'=>"", 'status'=>false));
    }

The respone form console is:

<br />

    <font size='1'><table class='xdebug-error xe-parse-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
    <tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Parse error: syntax error, unexpected ',' in C:\wamp\www\kinema\html\login.php on line <i>23</i></th></tr>
    </table></font>

Answer 1

Try this, You can't able to redirect from inside the ajax page, instead you can follow the below,

       $('#login_form').on('submit', function(e) {
        e.preventDefault();

        var username = $('#login_form input[name=username]').val();
        var password = $('#login_form input[name=password]').val();

        $.ajax({
          url: "login.php",
          type: "POST",
          data: {username: username,
                password: password},
          dataType: 'json', // added json datatype
          success: function(response) {
                   if(response.status){ // if status is true then navigate into another page
                     window.location = response.url;
                   }else{ // if the status is false then render the error. 
                       $('#invalid_content').html(response.msg);  

                    }
                }
        });

    });

login .php:

    if ($_SERVER["REQUEST_METHOD"] == "POST")
        {      
            $rows = query("SELECT * FROM users WHERE username = ?", $_POST["username"]);
            if (count($rows) == 1)
            {
                $row = $rows[0];
                if (crypt($_POST["password"], $row["hash"]) == $row["hash"])
                {
                    $_SESSION["id"] = $row["id"];                       
                    echo json_encode(array('msg'=>"Success.", 'url'=>"/kinema/html/index.php", 'status'=>true));
                }
            }elseif (( ( !isset($_POST["password"]) && !isset($_POST["username"]) ) && trim($_POST["password"])=="" && trim($_POST["username"])=="") ) {
                    echo json_encode(array('msg'=>"Username and password are Empty", 'url'=>"", 'status'=>false));
            }else{
                  echo json_encode(array('msg'=>"OOps, there is some other issues!!", 'url'=>"", 'status'=>false));
              }
        }
        else
        {               
            echo json_encode(array('msg'=>"Username ose fjalekalimi jane te pavlefshem.", 'url'=>"", 'status'=>false));
        }


       ?>