CODEWITHSUNDEEP
jqueryajaxtwitter-bootstrap
Lloyd Banks
Lloyd Banks

Reputation: 36659

jQuery AJAX .Post Not Working With Bootstrap

I have a login form that works fine if I submit using a traditional html form post

<form class="form-horizontal" id="loginform">
    <div class="control-group">
        <label class="control-label" for="user_name">
            Username or E-Mail
        </label>
        <div class="controls">
            <input type="text" id="user_name" name="user_name" autofocus>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="password">
            Password
        </label>
        <div class="controls">
            <input type="password" id="password" name="password">
        </div>
    </div>
    <div class="control-group">
        <div class="controls">
            <label class="checkbox">
                <input type="checkbox">Remember me
            </label>
            <br>
            <button type="submit" class="btn" id="submit_login">
                Sign-in
            </button>
        </div>
    </div>
</form>

Instead of having the page redirect, I'd like to have the user log-in and stay on the same page. I have the below jQuery to do this

$(document).ready(function(){
    $("#submit_login").click(function(){
        var user_name = $("#user_name").val();
        var password = $("#password").val();
        $.post("login.php", {user_name: user_name, password: password});
    });
});

But this isn't posting and my sessions aren't starting. I've printed the jQuery 'user_name' and 'password' variables and they are pulling in the correct values from the form. The variables the 'login.php' file looks for are also 'user_name' and 'password'. There are no console errors when I run the script.

What is causing the disconnect here?

Upvotes: 3

Views: 3542

Answers (2)

Lloyd Banks
Lloyd Banks

Reputation: 36659

It was a combination of the jQuery val() method and Bootstrap's btn class that defaults the buttons styled with it as submit buttons. I switched 

    var user_name = $("#user_name").val();
    var password = $("#password").val();

to

    var user_name = document.getElementById("user_name").value;
    var password = document.getElementById("password").value;

and 

<button type="submit" class="btn" id="submit_login">

to

<button type="button" class="btn" id="submit_login">

and the AJAX worked as expected.

The key was to change 'submit' to 'button' and not just delete the type assignment all together. If no type is specified, the button defaults to type 'submit'

Upvotes: 2

Kevin B
Kevin B

Reputation: 95047

You should prevent the default action immediately before sending your $.post to avoid the default form submit, otherwise your $.post will (in most cases) be aborted.

$(document).ready(function(){
    $("#submit_login").click(function(event){
        event.preventDefault(); // stop form submit
        var user_name = $("#user_name").val();
        var password = $("#password").val();
        $.post("login.php", {user_name: user_name, password: password});
    });
});

Upvotes: 2

Related Questions