Question

I’m trying to do a simple user validation, however, when I try to use the post request function with the html form, the browser ignores jquery post request and instead sends a get request. A fresh set of eyes would help a lot!

Here’s the script:

$(document).ready(function () {
    var user = $("#username");
    var pass = $("#password");
    var submit = $("#submit");

    $("#submit").click(function (event) {
        event.preventDefault();
        $.post("login.php", {
            username: user.val(),
            password: pass.val()
        }, function (data) {

            if (!data) {
                $("#login").append("Failed to reach server. Login Error.");
            }
            //$("div#login").hide();
            //$("div#welcome").css("display", "block"); else {
                loadpage();
            }

        }, "json");

        return false;
    });
});

Here’s the form in html, it’s pretty simple:

<Div id="welcome"> Welcome </div>
<Div id="login">
    <br><br><h2>Welcome to This Site</h2>
    <br><br><br><form id="form"> Username:
    <input type = "text" name = "username"> <br> Password:
    <input type = "password" name = "password" id = "password"> <br>
    <input type = "submit" name="submitbutton" id="submitbutton" class = "bluebutton"> 


</Div>

Just for the sake of eliminating any possible places for failure I hardcoded a username/password for the PHP here:

<?
if($username == "harry" && $password == "potter")
{
    $_SESSION["user"] = array();
    $array = array();
    $array["valid"] = "valid";
    echo(json_encode($array));
}

?>

Thanks in advance!

Answer 1

Your form doesn’t have a closing tag like </form> and also I didn’t find any element in your form with id submit, so it’s probably not triggering the function with following code

$("#submit").click(function(event){...});

instead it should be

$("#submitbutton").click(function(event){...});

Also return false; is unnecessary because you have already used event.preventDefault();.

Your form should have a closing tag. i.e.

<form id="myForm">
    <input type = "text" name = "username"> <br> Password:
    <input type = "password" name = "password" id = "password"> <br>
    <input type = "submit" name="submitbutton" id="submitbutton" class = "bluebutton">
</form>

Alternatively you can use

$('#myForm').on('submit', function(e){
    e.preventDefault();
    // Rest of your code
})