Alright, there\'s a few things that isn\'t standardized WordPress so I\'ve put together a minimal script which I\'ll explain piece by piece. Hopefully clear things up for you by the time you get to the end.

HTML Form

Below is a very simple HTML form. We\'re going to use javascript to listen for submission and stop it from actually refreshing the page but that will be later.

<form id="um_form" method="POST">
        <p>
            <label for="um_key">
                User Meta Value:&nbsp;&nbsp;
                <input type="text" name="um_key" id="um_key" value="" style="width:100%;" />
            </label>
            <input type="submit" value="Submit" />
        </p>
    </form>

We\'re $_POSTing the form but you could also $_GET the form if you\'d like. In this situation I don\'t think it matters.

Enqueue our scripts

So WordPress has a hook which you can use to enqueue styles and scripts in their proper places ( header or footer ) called wp_enqueue_scripts. Using this we can localize our script and pass a variable ( or two if you\'d like ) to our javascript, specifically the ajax_url. Doing that looks something like this:

/**
 * Enqueue our Scripts and Styles Properly
 */
function theme_enqueue() {

    $theme_url  = get_template_directory_uri();     // Used to keep our Template Directory URL
    $ajax_url   = admin_url( \'admin-ajax.php\' );        // Localized AJAX URL

    // Register Our Script for Localization
    wp_register_script(
        \'um-modifications\',                             // Our Custom Handle
        "{$theme_url}/scripts/um-modifications.js",  // Script URL, this script is located for me in `theme-name/scripts/um-modifications.js`
        array( \'jquery\' ),                              // Dependant Array
        \'1.0\',                                          // Script Version ( Arbitrary )
        true                                            // Enqueue in Footer
    );

    // Localize Our Script so we can use `ajax_url`
    wp_localize_script(
        \'um-modifications\',
        \'ajax_url\',
        $ajax_url
    );

    // Finally enqueue our script
    wp_enqueue_script( \'um-modifications\' );
}
add_action( \'wp_enqueue_scripts\', \'theme_enqueue\' );

The above code is heavily commented so please read through the code comments if something doesn\'t make sense. This would go into your functions.php file.

Our Javascript / JQuery

Since I wanted to keep it simple, In this example we\'re only processing one meta_value but you could just as easily passed multiple meta_values to the data object, referencing them in your PHP by $_POST index which we\'ll see later. The below lies in a scripts directory, theme-name/scripts/um-modifications.js and is also heavily commented:

// Declare our JQuery Alias
jQuery( \'document\' ).ready( function( $ ) {

    // Form submission listener
    $( \'#um_form\' ).submit( function() {

        // Grab our post meta value
        var um_val = $( \'#um_form #um_key\' ).val();

        // Do very simple value validation
        if( $( \'#um_form #um_key\' ).val().length ) {
            $.ajax( {
                url : ajax_url,                 // Use our localized variable that holds the AJAX URL
                type: \'POST\',                   // Declare our ajax submission method ( GET or POST )
                data: {                         // This is our data object
                    action  : \'um_cb\',          // AJAX POST Action
                    \'first_name\': um_val,       // Replace `um_key` with your user_meta key name
                }
            } )
            .success( function( results ) {
                console.log( \'User Meta Updated!\' );
            } )
            .fail( function( data ) {
                console.log( data.responseText );
                console.log( \'Request failed: \' + data.statusText );
            } );

        } else {
            // Show user error message.
        }

        return false;   // Stop our form from submitting
    } );
} );

AJAX PHP Callback / Handler / Action

Finally, The actual processing! Important things to note are the hooks at the end of this function:

• wp_ajax_nopriv_{your_ajax_action_name_here} - allows us to use ajax on the front end
• wp_ajax_{your_ajax_action_name_here} - allows us to use ajax period.

Here we can get the current user and update their user_meta or even the User Object if we wanted to.

/**
 * AJAX Callback
 * Always Echos and Exits
 */
function um_modifications_callback() {

    // Ensure we have the data we need to continue
    if( ! isset( $_POST ) || empty( $_POST ) || ! is_user_logged_in() ) {

        // If we don\'t - return custom error message and exit
        header( \'HTTP/1.1 400 Empty POST Values\' );
        echo \'Could Not Verify POST Values.\';
        exit;
    }

    $user_id        = get_current_user_id();                            // Get our current user ID
    $um_val         = sanitize_text_field( $_POST[\'first_name\'] );      // Sanitize our user meta value
    $um_user_email  = sanitize_text_field( $_POST[\'user_email\'] );      // Sanitize our user email field

    update_user_meta( $user_id, \'first_name\', $um_val );                // Update our user meta
    wp_update_user( array(
        \'ID\'            => $user_id,
        \'user_email\'    => $um_user_email,
    ) );

    exit;
}
add_action( \'wp_ajax_nopriv_um_cb\', \'um_modifications_callback\' );
add_action( \'wp_ajax_um_cb\', \'um_modifications_callback\' );

Hopefully this makes it easier for you to understand and visualize. Should you have any questions, comment below!