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

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!

| improve this answer | |

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