How to submit AJAX Forms only specific fields – WordPress

You’re missing a lot of this here.

1. You’re working with WordPress ajax so you need the admin-ajax.php based url that will be used in url args, which is missing.
2. WordPress ajax needs the action key and value in form data, that is missing in your code.
3. WordPress also required nonce, if you’re handing nonce in your code and making nonce validation, that is also missing in your code.
4. you’ve defined dataType: 'json' which means you’re expecting json from your ajax response but in the success function, you’re trying to write json object into html div, so it’s unclear what you’re actually sending in your response. you need to work here, if you’re sending html code in response then dataType: 'html' will be used if you’re sending json then you need to change html(data) to html(JSON.stringify(data)

So after correcting all those things your code should be like this, I have provided all the possible explanations so that you could understand what I have done and changed in the code.

NOTE: I have not tested the code so if you see any error in console, please let me know so that I could update and fix the code

jQuery(document).ready(function ($) {
    $(document).on('submit', '.mts-edit-account', function (e) {
        // prevent default event.
        e.preventDefault();

        // define form element.
        const form = $(this);

        // get the wordpress ajax submission url from the form action attribute.
        const ajax_url = form.attr('action');

        // get specific form field using form.find().
        var formData = {
            first_name: form.find('#account_first_name').val(), // get first name.
            last_name: form.find('#account_last_name').val(), // get last name.
            action: form.find('input[name=action]').val(), // get the action value from the hidden field.
            _wpnonce: form.find('input[name=save-account-details-nonce]'), // get the nonce value define by name save-account-details-nonce

            /**
             * NOTE: we're passing nonce by with key name _wpnonce
             * so in you php code when you check for nonce validation
             * use this key name not the save-account-details-nonce
             * while the nonce action value is still save_account_details
             *
             * otherwise your nonce verification will show failed because you're not using correct key.
             */
        };

        $.ajax({
            type: 'POST', // Request type is post
            url: ajax_url, // set admin_url('admin-ajax.php') url here.
            data: formData, // pass the form data with first_name, last_name, action, _wpnonce
            dataType: 'json', // pass the return data type.
            success: function (res) {
                // if we have success in response.
                if (res.success) {
                    const success_msg = res.data.message;
                    // now display this success message in your html element.
                } else {
                    // when we get an error response.
                    // not our ajax is not failed here but we're error in success function
                    // because we're getting a response from ajax but error is in our php code.
                    // wp_send_json_error && wp_send_json_success do this thing
                    // you'll have to read about those functions
                    const error_msg = res.data.error;
                    // Now show this error message in your html element.
                }
            },
            error: function () {
                // catch the error.
                console.log('Something not working!');
            },
        });
    });
});

Coming to your PHP code for handling ajax.
add_action( 'woocommerce_save_account_details_errors', array( &$errors, &$user ), 1, 10 );
I am not sure what you’re added to this line, doesn’t make any sense when you have your own ajax handling function. remove this line.

Then you can’t use wc_print_notices() you’ll have to write your own validation and error handling. In able to use wc_print_notices(), you need a deep understanding of WooCommerce.

Also, you’re missing validation, nonce checking, sanitization, and many more things. You need to learn so much about these things. Below I have prepared the php code and tried to explain basics, but if you want to learn about those function and their usage you need to search each function on the internet or in WordPress documentation and learn about those. it’s hard to explain and teach all those functions and how they work, in detail.

Note: You should always use a prefix for your global function names to avoid conflict and keep the function name unique. I have changed save_account_details to vh_sto_wc_custom_save_account_details to make it unique. However, your nonce action name is still save_account_details you can change it and make it unique in all the required places later

Here is the php code for handling the ajax callback.

/**
 * Ajax callback for saving account details.
 */
function vh_sto_wc_custom_save_account_details() {
    // We are using try catch to handle the error and send in response.
    // when validation fails.
    try {

        // Check if the nonce is available in post data.
        if ( ! isset( $_POST['_wpnonce'] ){
            throw new Exception( __( 'Nonce is missing.', 'your-text-domain' ) );
        }

        // validate the nonce.
        if ( wp_verify_nonce( sanitize_key( $_POST['_wpnonce'] ), 'save_account_details' ) ) {
            throw new Exception( __( 'Nonce is invalid.', 'your-text-domain' ) );
        }

        // Check if the first name is available and not empty.
        if ( ! isset( $_POST['first_name'] ) || empty( $_POST['first_name'] ) ) {
            throw new Exception( __( 'First name should not be empty.', 'your-text-domain' ) );
        }

        // Check if the last name is available and not empty.
        if ( ! isset( $_POST['last_name'] ) || empty( $_POST['last_name'] ) ) {
            throw new Exception( __( 'Last name should not be empty.', 'your-text-domain' ) );
        }

        // Store values in array.
        $first_name = sanitize_text_field( wp_unslash( $_POST['first_name'] ) );
        $last_name  = sanitize_text_field( wp_unslash( $_POST['last_name'] ) );

        // Get current user id.
        $user_id = get_current_user_id();

        // Check if the user id is a valid id.
        if ( $user_id <= 0 ) {
            throw new Exception( __( 'You are not allowed to perform this action.', 'your-text-domain' ) );
        }

        // update user data.
        $user_data = wp_update_user(
            array(
                'ID'         => $user_id,
                'first_name' => $first_name,
                'last_name'  => $last_name,
            )
        );

        // Check if there is any error on the update.
        if ( is_wp_error( $user_data ) ) {
            throw new Exception( __( 'Sorry, could not update your account details.', 'your-text-domain' ) );
        } else {
            // send success response when there is no error and the update was successful.
            wp_send_json_success( array( 'message' => __( 'Your account details has been updated.', 'your-text-domain' ) ) );
        }
    } catch ( Exception $e ) {
        // Send the error response with error message.
        // in jquery you'll access by response.data.error
        wp_send_json_error( array( 'error' => $e->getMessage() ) );
    }
}
add_action( 'wp_ajax_save_account_details', 'vh_sto_wc_custom_save_account_details' );