CODEWITHSUNDEEP
javascriptphpjqueryajaxwordpress
Crays
Crays

Reputation: 2508

Jquery ajax within a function

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 :(

Upvotes: 0

Views: 93

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

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
    });
});

Upvotes: 1

Related Questions