Jquery ajax within a function

Question

Hi i'm trying to use ajax to send a simple username and password to a login.php which would return 2 result being false or true. Problem is, when i click #loginbutton, it seem to be loading but nothing appears after that (no alert or page reload).

here's my script

    <script>
$(document).ready(function(){
    $('#loginbutton').click(function() {
$('#loginform').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(result) { // on success..
            if (result == 'false') {
            alert("Login failed.\n\nThe username and password doesn't match or perhaps the username doesn't exist.\n\nMake sure you have checked your email and validate your account.");
            }
            else if (result == 'true') {
            alert("Thank you, the registration was successful. \nWe have sent you an email, please validate your account. \nClick OK and we will redirect you to the homepage.");
            window.location.replace("http://127.0.0.1/wordpress/");
        }
        }
    });
    return false; // cancel original event to prevent form submitting
});     
});
});
</script>

and my login form (i'm trying to integrate this with wordpress)

<?php 
                        $templateDirectory= get_bloginfo('template_directory');

                            echo'
                        <form id="loginform" action="'.$templateDirectory.'/login.php" method="post" class="login">
                        <a href="#" onClick="document.getElementById(\'loginform\').submit();" class="linkit">LOGIN</a>
                        <div class="para"><input type="text" name="uname" placeholder="Username ..." onkeydown="if (event.keyCode == 13) document.getElementById(\'loginform\').submit()"> <br><input type="password" name="pass" placeholder="Password ..." onkeydown="if (event.keyCode == 13) document.getElementById(\'loginform\').submit()"></div>
                        </form>';

?>

anyone can tell me what's wrong :(

Arun P Johny · Accepted Answer · 2013-10-26 15:45:01Z

1

You are adding a form submit handler inside a click handler... it is not required... try

$(document).ready(function () {
    $('#loginform').submit(function () { // catch the form's submit event
        $.ajax({ // create an AJAX call...
            data: $(this).serialize(), // get the form data
            type: $(this).attr('method'), // GET or POST
            url: $(this).attr('action'), // the file to call
            success: function (result) { // on success..
                if (result == 'false') {
                    alert("Login failed.\n\nThe username and password doesn't match or perhaps the username doesn't exist.\n\nMake sure you have checked your email and validate your account.");
                } else if (result == 'true') {
                    alert("Thank you, the registration was successful. \nWe have sent you an email, please validate your account. \nClick OK and we will redirect you to the homepage.");
                    window.location.replace("http://127.0.0.1/wordpress/");
                }
            }
        });
        return false; // cancel original event to prevent form submitting
    });
});

answered Oct 26, 2013 at 15:45

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Crays Over a year ago

nope its not working either, i try abit more stuff and it seem that even calling a return false; or e.preventDefault(); to the loginform doesn't work, but i've check, i didn't get the ID wrong. what could be wrong here @_@

Collectives™ on Stack Overflow

Jquery ajax within a function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related