0

I'm attempting to use this tutorial WordPress AJAX Login Without a Plugin – The Right Way by Natko Hasic to build a login, registration and forgot password forms that handle everything, including error messages with AJAX. The differences between the tutorial and my project are... I don't want to do it in a popup and I'm doing it in a plugin not in the root theme folder.

Here's what code I do have...

The code in the page template:

<form name="login_form" id="login_form" class="login_form" action="" method="post">
    <p class="status"></p>

    <p>
        <input type="text" name="username" id="username" placeholder="Username" />
    </p>

    <p>
        <input type="password" name="password" id="password" placeholder="Password" />
    </p>

    <button name="submit" id="submit" class="btn"><?php _e("Sign in", "shorti"); ?></button>
    <a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Lost your password?</a>

    <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>

</form>

The code running in my main plugin .php file:

 <?php // The php script I'm trying to run

    add_action( 'init', 'ajax_login_init' );
    function ajax_login_init() {

        wp_register_script( 'ajax-login-script', plugin_dir_url( __FILE__ ) . 'js/ajax-login-script.js', array('jquery') );
        wp_enqueue_script( 'ajax-login-script' );

        wp_localize_script( 'ajax-login-script', 'ajax_login_object', array(
            'ajaxurl' => admin_url( 'admin-ajax.php' ),
            'redirecturl' => home_url(),
            'loadingmessage' => __( 'Sending user info, please wait...' )
        ));

        // Enable the user with no privileges to run ajax_login() in AJAX
        add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
    }

    // Check if users input information is valid
    function ajax_login() {
        // First check the nonce, if it fails the function will break
        check_ajax_referer( 'ajax-login-nonce', 'security' );

    //Nonce is checked, get the POST data and sign user on
    $info = array();
        $info['user_login'] = $_POST['username'];
        $info['user_password'] = $_POST['password'];
        $info['remember'] = true;

    $user_signon = wp_signon( $info, false );
    if ( is_wp_error( $user_signon )) {
        echo json_encode( array( 'loggedin'=>false, 'message'=>__( 'Wrong username or password!' )));
    } else {
        echo json_encode( array( 'loggedin'=>true, 'message'=>__('Login successful, redirecting...' )));
    }

    die();
}

My ajax-login-script.js file contents:

jQuery(document).ready(function($){

    // Perform AJAX login on form submit
    $('form#login_form').on('#submit', function(e){
        $('form#login_form p.status').show().text(ajax_login_object.loadingmessage);
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: ajax_login_object.ajaxurl,
            data: { 
                'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
                'username': $('form#login_form #username').val(), 
                'password': $('form#login_form #password').val(), 
                'security': $('form#login_form #security').val() },
            success: function(data){
                $('form#login_form p.status').text(data.message);
                if (data.loggedin == true){
                    document.location.href = ajax_login_object.redirecturl;
                }
            }
        });
        e.preventDefault();
    });
});

I'm not at all familiar with AJAX nor JS so any light you can shed on the matter is greatly appreciated!

  • So what exactly is not working? – eskimo Nov 13 '13 at 21:26
  • @eskimo: If you submit the form with empty forms or invalid data it just reloads the page and if I input the correct data it also reloads the page still showing the login form instead of the pages actual information. Like I said this is basically my first time trying to work with JS/AJAX... so I have no clue where to even start looking to change things. Thanks – Designer 17 Nov 13 '13 at 22:01
  • I've didn't read the complete tutorial but the first thing I notice is that your form action is empty (action="") and in the tutorial they define action="login". Seems to me that's a crucial thing to fix. – eskimo Nov 13 '13 at 22:50
  • @eskimo: yeah, I had put it in there but when I used the form it would redirect me to my current page with an extension of /login which returns a 404 page error. Not sure if that would be considered progress or not :P – Designer 17 Nov 13 '13 at 23:00
  • The 404 is normal since the page login doesn't exist. It shouldn't go to that page but submit the form. I've catched another error, which is crucial as well. In ajax-login-script.js you have $('form#login_form').on('#submit', function(e). Remove the '#' before submit. And make sure that action="login" is still set on the form code. – eskimo Nov 14 '13 at 9:30
2

Thanks to @eskimo I was able to get this working and figured I share an answer for any of those trying to do the same!

In the ajax-login-script.js file all I had to do was change this $('form#login_form').on('#submit', function(e) to this ... $('form#login_form').on('submit', function(e) just removing the # before calling submit.

Hope this helps someone!

  • This was helpful thx for sharing. – Hexodus Aug 13 '14 at 15:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.