validate login form using ajax and json

Question

I am tring to validate my login page using ajax . And fetching data from the database in json format. I tried many time & it works for me, but it is printing alert when xmlhttp.readyState < 4 .

<!DOCTYPE html>
 <html>
<head>
<title></title>
<script type="text/javascript">
     function hey()
    {
    x="'"+document.login_tsms.user.value+"'";
    y="'"+document.login_tsms.pass.value+"'";

    var sql="select * from users where "+x+" IN (id,username)";

    var xmlhttp = new XMLHttpRequest();
    var count=0;
    xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var xx=xmlhttp.responseText;
        var obj = JSON.parse(xx);

        x=obj[0].id;
        y=obj[0].username;
        z=obj[0].password;

        xx=document.login_tsms.user.value;
        yy=document.login_tsms.pass.value;

        if(x==xx || y==xx)
        {
            if(yy==z)
            {
                alert("ok man cool");
                //document.login_tsms.setAttribute("action","admin/admin.php");
            }
            else
            {
                alert("Invalid username or password!");
            }
        }
        else
        {
            alert("Invalid username or password!");
        }
    }
    else
    {
            alert("Invalid username");
    }
};
var url="db.php?q=read&sql="+sql;
xmlhttp.open("REQUEST", url, true);
xmlhttp.send();
}
</script>

        <div class="modal-body">
            <form name="login_tsms" action="login.php" method="post">
                <label style="font-size: 16px; font-weight: normal; margin-right: 35px;">User ID OR Name:</label>

                <input required type="text" name="user" id="juser" style="border: 1px solid #ddd;border-radius: 4px;height: 40px;margin-bottom: 15px;padding-left: 12px;width: 406px;"/><br>

                <label style="font-size: 16px; color: red; margin-left:165px;" id="uid_invalid"></label><br>

                <label style="font-size: 16px; font-weight: normal; margin-right: 90px;">Password:</label> 

                <input  autocomplete="off" type="password" name="pass"  id="jpass" style="margin-left: 4px; border: 1px solid #ddd;border-radius: 4px;height: 40px;margin-bottom: 15px;padding-left: 12px;width: 406px;" required/><br>

                <label style="font-size: 16px; color: red; margin-left: 165px;" id="upas_invalid"></label><br>

                <input type="button" onclick="hey()" name="submit" value="Login" style="display: block;height: 40px;width: 136px; border: 1px solid #5973A8;font-size: 22px;margin-left: 165px;background-color:#5973A8;border-radius: 4px; color: #fff;letter-spacing: 1px;" />

                <br>

                <h3 style="margin-left: 165px; margin-top: 0px;">Not a register user?<a id="gignup" href="signup.php">Sign up</a></h3>

            </form>
            <br>            
        </div>

it works for me fine. but its print(alert) "invalid username" 3 time. can anybody helps me.

Answer 1

onreadystatechange will be called 5 times during the execution of ajax. it means it informs status change function when ever there is a change in ajax request. the changes are like client created, connection established, headers received, content received, ajax completed. Because of your condition (xmlhttp.readyState == 4 && xmlhttp.status == 200) it goes into true block only once, in all other cases it goes to false block then outputs "invalid username"

validate login form using ajax and json

Question

1 answers

solution1
0 2016-12-28 12:21:26

validate login form using ajax and json

Question

1 answers

solution1 0 2016-12-28 12:21:26

solution1
0 2016-12-28 12:21:26