jquery click function is responding weirdly. ajax call also not triggered

Question

Instead of a POST request, somehow GET is being triggered.

Secondly, the ajax call is not being called.

I have done this a hundred times, but everything I tried seem to do nothing. This could be some my fault somehow, but please help. If you need anything more please ask. Regards

$(document).ready(function(){
    console.log("bro");
    $("#login").click(function () {
        console.log("hi");
        var name = $('#uname').val();
        var password = $('#password').val();
        console.log(name);
        console.log(password);
        $.ajax({
            url:"login-check.php",
            data: {name:name, password:password},
            dataType:"text",
            method:"POST",
            success:function(data){
                if(data === "1" || data === "2"){
                    alert(data);
                    console.log("hello");
                    window.open('index.php','_self');
                }
                else{

                }
            }
        });
    });
});

HTML:

<!-- Form Code -->
<div class = "container">
    <h2 style="text-align:center;">Please Fill the form to Sign up</h2>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="control-label col-sm-2" for="name">Username:</label>
            <div class="col-sm-10">
                <input type = "username" class = "form-control" name = "uname" id = "uname" placeholder = "username" required autofocus>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="pwd">Password:</label>
            <div class="col-sm-10">          
                <input type = "password" class = "form-control" name = "password" id = "password" placeholder = "password" required>
            </div>
        </div>
        <div class="form-group">        
            <div class="col-sm-offset-2 col-sm-10">
                <button class="btn btn-primary" name = "login" id="login">Sign In</button>
            </div>
        </div>
     </form>

     Click here to clean <a href = "logout.php" tite = "Logout">Session.

</div>

console logs

Answer 1

Because your button is inside the form tag and it does not have a type attribute, it is acting as a submit button and submitting the form before the ajax is called (default form method is GET by the way)

Details:

• By default, forms that dont explicitly set a method attribute are submitted using the GET method
• By default, any button that is inside a form tag that doesnt explicitly set the type attribute will be set to type="submit"
• Because you do not set either attribute in your html, when you click the button, it submits your form using the GET method before your click handler is triggered to call the ajax

To correct this there are 3 options:

1. explicitly declare type="button" on the button (this is what I would do)
2. call e.preventDefault at the top of your click handler to cancel the default behaviour of submitting the actual form
3. move the button outside of the form tag (you say you tried this without success, but it does work see this jsFiddle so I imagine you didnt move it quite far enough)

Additonally:

As Terry mentions in the comments, you should also explicitly set the action and method attributes on your form like:

<form action="login-check.php" method="post" class="form-horizontal">

This will ensure that the login works even if the user has javascript disabled and is good practice in general.

Answer 2

The problem is here:

method:"POST",

It should be:

type: "POST",

The definition of type of data is:

contentType: "text/plain",

EDIT: Full code of the ajax call

var dataString = 'name=' + name + '&password=' + password;
    $.ajax({
        type: "POST",
        url:"login-check.php",
        data: dataString,
        success: function(data){
            if(data === "1" || data === "2"){
                alert(data);
                console.log("hello");
                window.open('index.php','_self');
            }
            else{

            }
        }
    });

Answer 3

I think the problem is in the definition of your ajax call. I would suggest to pass a json object like so:

var obj = { username: un, password: pwd };

Then you can pass this object to the call by stringifying it:

dataType: 'json', data: JSON.stringify(obj)

Hope that helps.