Getting 400 error while trying to submit AJAX form in WordPress

Question

I created a signup form in WordPress and try to submit the form using AJAX and handling by the class Custom Form. But it responds 400 bad request as capture:

Codes enclosed:

HTML Template

get_header();
?>
<div class="authn main-content">
    <h1>Sign Up</h1>
    <form id="authn">
        <div class="form">
            <!-- Prefix -->
            <label for="prefix">Title</label>
            <div class="radio">
                <input type="radio" name="prefix" value="mr" checked>
                <label for="mr">Mr.</label>
            </div>
            <div class="radio">
                <input type="radio" name="prefix" value="ms">
                <label for="ms">Ms.</label>
            </div>
            <div class="radio">
                <input type="radio" name="prefix" value="mrs">
                <label for="mrs">Mrs.</label>
            </div>

            <!-- First Name -->
            <label for="fname">First Name</label><br>
            <input type="text" name="fname">

            <!-- Last Name -->
            <label for="lname">Last Name</label><br>
            <input type="text" name="lname">

            <!-- Email -->
            <label for="email">Email</label><br>
            <input type="text" name="email"><br>
    
            <!-- Password -->
            <div class="password">
                <label for="password">Password</label><br>
                <input type="password" name="password">
                <i class="icon bi bi-eye-slash eye"></i>
            </div>

            <!-- Confirm Password -->
            <div class="password">
                <label for="confirm-password">Confirm Password</label><br>
                <input type="password" name="confirm-password">
                <i class="icon bi bi-eye-slash eye"></i>
            </div>
        </div>
        <div class="terms">
            <!-- Terms -->
            <div class="checkbox">
                <input type="checkbox" name="terms">
                <span class="term">I agree to the <a class="text-link" href="<?php echo get_site_url() . '/terms-of-use'; ?>">terms</a> and the <a class="text-link" href="<?php echo get_site_url() . '/privacy-policy'; ?>">privacy policy</a>.</span>
            </div>

            <p>Already have had an account? <a class="text-link" href="<?php echo get_site_url() . '/login'; ?>">Login</a>.</p>
        </div>
        <div class="submit">
            <button type="submit">Register</button>
        </div>
    </form>
</div>
<?php
get_footer();

Class for registering scripts that is surely implemented.

`<?php
class Register_Scripts_Style {
    // Prevent from multiple instantiations
    use Singleton;

    // The __construct function is set to private since it is not allowed to instantiate in in public.
    private function __construct() {
        // Actions
        add_action('wp_enqueue_scripts', [$this, 'register_stylesheet']);
        add_action('wp_enqueue_scripts', [$this, 'register_javascript']);
    }

    // Register and enqueue stylesheets
    public function register_stylesheet() {
        // Unrelated code
    }   

    public function register_javascript() {
        // Get the current page slug's that is mainly for login and signup page)
        $slug = get_post_field( 'post_name', get_post());

        // Register script
        wp_register_script('bookstore-jquery', 'https://code.jquery.com/jquery-3.7.1.min.js', array(), '3.7.1', false); // Jquery
        wp_register_script('bookstore-main', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true);// main.js

        // Enqueue Scripts
        wp_enqueue_script('bookstore-jquery');
        wp_enqueue_script('bookstore-main');

        // Only register authn.js in login and signup page
        if ($slug === 'login' || $slug === 'signup'):
            wp_register_script('bookstore-authn', get_template_directory_uri() . '/assets/js/authn.js', array('bookstore-main'), '1.0.0', true);// authn.js

            // it allows to pass PHP-generated data to JQuery.
            // 'ajax_url' will be the URL for the WP AJAX endpoint, which allows to make AJAX requests to the WP backend (admin-ajax.php).
            wp_localize_script( 'bookstore-authn', 'bookstore_authn',
            array('ajax_url' => admin_url('admin-ajax.php')));
            
            wp_enqueue_script('bookstore-authn');
        endif;
    }
}`

Class for sending data to db, however at the moment I just want to echo the input value to the page for testing.

class Custom_Form {
    // Prevent from multiple instantiations
    use Singleton;

    // The __construct function is set to private since it is not allowed to instantiate in in public.
    private function __construct() {
        // Actions
        add_action('wp_ajax_signup_form_submit', [$this, 'signup_form_submit']);
        add_action('wp_ajax_nopriv_my_form_submission', [$this, 'signup_form_submit']);
    }

    // Submit signup form
    public static function signup_form_submit() {
        echo $_POST['prefix'];
    }
}

AJAX for handling the form data.

$(document).ready(() => {
    // Submit form
    $('#authn').submit((function(e) {
        e.preventDefault();
        
        const form = $(this);
        const formData = {
            prefix: form.find('input[name="prefix"]:checked').val()
        };
        
        // Fire off the request to the /admin-ajax.php
        $.ajax({
            type: 'post',
            url: bookstore_authn.ajax_url, // // This is the URL for the WordPress AJAX endpoint from Register_Script_Style class 
            data: {
                action: 'signup_form_submit',
                data: formData
            },
            success: res => {
                console.log('res: ' + res);
            },
            error: err => {
                console.log('err: ' + err);
            }
        })
    }));
}); 

Thank you so much!!

I want to figure out what are the issues that causes the 400 response, thank you so much!

Answer 1

If the problem occurs while you are not logged in, try to replace the action hook

add_action('wp_ajax_nopriv_my_form_submission', [$this, 'signup_form_submit']);

to

add_action('wp_ajax_nopriv_signup_form_submit', [$this, 'signup_form_submit']);

Note: wp_ajax_nopriv_{$action} Fires non-authenticated Ajax actions for logged-out users. For more detail, click