I want to edit user meta on the front using an ajax form, this is what i have:

The form has the user ID:

<form id="<?php echo $current_user->ID; ?>"...

This is the script::

    jQuery( document ).ready( function() {
        jQuery( '#<?php echo $current_user->ID; ?>' ).submit( function( e ) {
            jQuery.ajax( {
                type: "POST",
                url: ajaxurl,
                data: "action=updateUserFront&id=" + <?php echo $post->ID?>,  
                success: function() {
                    alert( 'funcionó' );
            } );
        } );
    } );

This is what i have in my functions.php file

function my_ajaxurl() {
    $html  = '<script type="text/javascript">';
    $html .= 'var ajaxurl = "' . admin_url( 'admin-ajax.php' ) . '"';
    $html .= '</script>';
    echo $html;
add_action( 'wp_head', 'my_ajaxurl' );

function updateUserFront_ajax() {
    $user_id    = get_current_user_id();
    $newVal     = 'test';
    $userUrl    = get_user_meta( $user_id, 'url', true ); 


    die( $newVal );
add_action( 'wp_ajax_updateUserFront', 'updateUserFront_ajax' );

1 Answer 1


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.


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">
            <label for="um_key">
                User Meta Value:&nbsp;&nbsp;
                <input type="text" name="um_key" id="um_key" value="" style="width:100%;" />
            <input type="submit" value="Submit" />

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
        '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`

    // 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:

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.';

    $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,
    ) );

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!


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