Not displaying ajax alert

Question

I'm trying to have a login form in wordpress as a plugin But I have a problem with ajax that is about not display alert and I think older version of wordpress was diffrent because I learned it from a old video that was about wordpress developing

ajax code

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

    $('#loginForm').on('submit', function (event) {

        event.preventDefault();
        let user_email = $('#userEmail').val();
        let user_password = $('#userPassword').val();
        let notify = $('.alert');
        $.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'post',
            datatype: 'json',
            data: {
                action: 'app_auth_login',
                user_email: user_email,
                user_password: user_password

        },
        success: function (response) {},
        error: function (error) {
            if (error) {
                notify.addClass('alert-error');
                notify.append('<p>there is an error</P>');
                notify.css('display','block');
            }
        }
    });

 });

});

login form

<div class="auth-wrapper">
    <div class="alert" style="display:none;">

    </div>
    <div class="login-wrapper" method="post" id="loginForm">
        <form action="">

            <div class="form-row">
                <label for="userEmail">ایمیل :</label>
                <input type="text" name="userEmail" id="userEmail"></input>
            </div>
            <div class="form-row">
                <label for="userPassword">کلمه عبور :</label>
                <input type="text" name="userPassword" id="userPassword"></input>
            </div>
            <div class="form-row">
                <button name="submitLogin">ورود</button>
            </div>

        </form>

    </div>

</div>

function that register the js

<?php


function app_auth_load_assets()
{

    wp_register_style('app_auth_style', APP_AUTH_URL . 'assets/css/auth.css');
    wp_enqueue_style('app_auth_style');

    wp_register_style('app_auth_script', APP_AUTH_URL . 'assets/js/auth.js', ['jquery']);
    wp_enqueue_style('app_auth_script');

}

add_action('wp_enqueue_scripts', 'app_auth_load_assets');

and I'm using shortcode for that

<?php


function app_auth_login_handler($atts, $content = null)
{
    include APP_AUTH_TPL . "front/login.php";
}

function app_auth_register_handler($atts, $content = null)
{
    include APP_AUTH_TPL . "front/register.php";
}

add_shortcode('app_auth_login', 'app_auth_login_handler');
add_shortcode('app_auth_register', 'app_auth_register_handler');

Answer 1

Issues and Fixes AJAX Script Error: Your jQuery code has a typo: jQuery(document).reday should be jQuery(document).ready. Also, datatype should be dataType.

Form Handling: Your loginForm has the method="post" attribute, but it should be in the tag, not the tag.

Enqueueing JavaScript: You should use wp_enqueue_script instead of wp_enqueue_style to include your JavaScript file. Also, make sure to use wp_localize_script to pass AJAX URL and any localized data to your JavaScript file.

Handling AJAX Request: Ensure you have a handler in your WordPress functions.php or plugin file to process the AJAX request.

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

    $('#loginForm').on('submit', function (event) {
        event.preventDefault();
        
        let user_email = $('#userEmail').val();
        let user_password = $('#userPassword').val();
        let notify = $('.alert');

        $.ajax({
            url: ajaxurl, // 'ajaxurl' is provided by WordPress
            type: 'post',
            dataType: 'json',
            data: {
                action: 'app_auth_login',
                user_email: user_email,
                user_password: user_password
            },
            success: function (response) {
                if (response.success) {
                    notify.removeClass('alert-error').addClass('alert-success').text('Login successful').show();
                } else {
                    notify.removeClass('alert-success').addClass('alert-error').text(response.data.message).show();
                }
            },
            error: function () {
                notify.removeClass('alert-success').addClass('alert-error').text('There was an error').show();
            }
        });

    });

});  

In the plugin :

function app_auth_load_assets()
{
    wp_register_style('app_auth_style', APP_AUTH_URL . 'assets/css/auth.css');
    wp_enqueue_style('app_auth_style');

    wp_register_script('app_auth_script', APP_AUTH_URL . 'assets/js/auth.js', ['jquery'], null, true);
    wp_enqueue_script('app_auth_script');
    
    // Make sure to localize script to pass AJAX URL
    wp_localize_script('app_auth_script', 'app_auth_vars', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}

add_action('wp_enqueue_scripts', 'app_auth_load_assets');

function app_auth_login()
{
    // Check nonce for security
    // if ( !isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'app_auth_nonce') ) {
    //    wp_send_json_error(['message' => 'Invalid nonce']);
    //    return;
    // }

    // Retrieve email and password from AJAX request
    $email = sanitize_email($_POST['user_email']);
    $password = sanitize_text_field($_POST['user_password']);
    
    $user = wp_authenticate($email, $password);
    
    if (is_wp_error($user)) {
        wp_send_json_error(['message' => $user->get_error_message()]);
    } else {
        wp_set_auth_cookie($user->ID);
        wp_send_json_success();
    }
}

add_action('wp_ajax_app_auth_login', 'app_auth_login');
add_action('wp_ajax_nopriv_app_auth_login', 'app_auth_login');

Explanation JavaScript Changes:

Changed jQuery(document).reday to jQuery(document).ready. Corrected datatype to dataType. Used ajaxurl for the AJAX request URL, which is automatically provided by WordPress when you localize your script. Enqueue Scripts:

Used wp_enqueue_script for JavaScript and wp_localize_script to pass the AJAX URL to your script. PHP Handler:

Added error checking and user authentication. Used wp_send_json_success() and wp_send_json_error() for proper AJAX response handling. With these changes, your AJAX login form should work correctly, providing feedback to the user based on the success or failure of the login attempt.