Question

i want check in my mysql database if the user enter the username and password correctly and then go in the home.html, i have some javascript code that detect when the user click the login button, but i can’t understand how check in the database with javascript, i know how do that in php, but i can’t understand how call the php from the javascript or do it directly in the js code, this is some code:

the form in the html:

    <div id="password">
        <div class="input username"><input type="text" placeholder="User name" /></div>
        <div class="input password"><input type="password" placeholder="Password" /></div>
        <button>Log in</button>
        <a href="#" class="back">Back</a>
    </div>
</div>

then in my Login.js file i have this:

function forgot() {
//Se ho scritto la password allora fai l'animazione wobble, altrimenti vai in home.html
    if($("#password .input.password input").attr("value")!='') {
        $.notification( 
            {
                title: "Wrong password",
                content: "Just leave the password field empty to log in.",
                icon: "!"
            }
        );
        $("#password").removeClass().addClass("animated wobble").delay(1000).queue(function(){ 
            $(this).removeClass();
            $(this).clearQueue();
        });
        $("#password .input.password input").attr("value", "").focus();
    } else {
        document.location.href = "home.html";
    }
}

now for the login i detect only if the field are empty, but i want detect mysql database how i can check it? because i want if the user enter wrong username and password span a $notification alert, anyone can help me?

Answer 1

Please suppose your html form is like below:

<input id="uname" name="uname" type="text" placeholder="User name" />
<input id="pass" name="pass" type="password" placeholder="Password" />
<button id="btn_login">Log in</button>

And suppose php script named checkPassword.php is like below:

<?php
    /*
      1.Retrieve post data : "uname" and "pass".
      2.Cehck if  user name and password is valid.
    */
    if( /* valid user name and password */ ){
        echo "OK";
    }else{
        echo "NG";
    }
?>

The Javascript code could goes like below:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript">
$(function() {
// set a event handler to the button
  $("#btn_login").click(function() {
    // retrieve form data
    var uname = $("#uname").val();
    var pass = $("#pass").val();

    // send form data to the server side php script.
    $.ajax({
        type: "POST",
        url: "checkPassword.php",
        data: { uname:uname, pass:pass }
    }).done(function( data ) {

        // Now the output from PHP is set to 'data'.
        // Check if the 'data' contains 'OK' or 'NG'
        if (data.indexOf("OK") >= 0){

            // you can do something here
            alert("Login Successed.");
            location.href = "ok.html";

        }else if(data.indexOf("NG") >= 0){

            // you can do something here
            alert("Login Faild.");
            location.href = "ng.html";
        }
    });
  });
});
</script>