How update custom fields with ajax in Wordpress?

Question

I'm working on a Profile Page, where users can modify fields like name, address, etc; but i don't want to use a button to save all the fields, just the field(s) that changed . The users data will be loaded automatically from the registration sign in. So, i just need to change some values where the user might have entered something incorrectly. My way to save the data will be a

<input type="text" name="name" /> where the <a href="" onclick"function">

which will redirect to the ajax module, as i see. But, i really don't know anything about working the ajax native functions & hooks for wordpress.

== original message ==
I'm working on a Profile Page, who may be able to users to can modify fields like name, address, etc; but i don't want to use a button to save the whole fieds, just the field who is modifying indeed. The users data will be loaded automaticly from the registration sign in. So, i just need to change some values who users might insert wrong. My way to save the data will be a <input type="text" name="name" /> where the <a href="" onclick"function"> who gonna redirect to the ajax module, as i see. But, i really don't know anything about working the ajax native functions & hocks for wordpress.

Answer 1 · 2016-01-16T00:40:21Z

January 16, 2016 12:40am

Essentially all you need to do is create the inputs on a page and fill them with the usermeta as the initial value. Then on change, pass the input values to a php file via ajax to update the usermeta.

Below is a really rough idea. This code is not perfect just typed it off the top of my head, but should get you started in the right direction.

//put this in a custom template or shortcode to display on page
$user_id = get_current_user_id;
<input type="text" name="eye_color" id="eye_color" value="<?php get_user_meta($user_id, 'eye_color', true);  ?>"/> 
<input type="hidden" id="userID" value="<?php echo $user_id ?>"/>

since you want to do this without a button, then have an onchange call in your js

<script>
$(document).ready(function(){
    $('input').change(function(){
  var metavalue= this.val();
  var metakey=  this.attr('id');
  var user = $('#userID').val();
        $.post("updateUser.php",{
            user : user,
            metavalue : metavalue,
            metakey : metakey
         },
      function(result){
            alert("Data Updated");
            });
    });
});
</script>

then have a php file updateUser.php

<?php
$userID = sanitize_text_field($_REQUEST['userID']);
$metakey = sanitize_text_field($_REQUEST['metakey']);
$metavalue =  sanitize_text_field($_REQUEST['metavalue']);
update_usermeta( $userID, $metakey, $metavalue );
return "success";

Answer 2 · 2016-01-21T07:20:49Z

January 21, 2016 7:20am

Thank you Andrew McCormick! Great way to do that. I tried many ways to do that, but i got the same result since i read an article and i got this example:

Create the file: userInformation.php:

<?php
    echo  "<input type='text' onmouseout='getContent(this)' name='name' placeholder='".get_post_meta( $post->ID, 'country', true )."' />";
?>

Into the same file, i had to create a JS script code:

<script type="text/javascript">
   function getContent(content){ // function that initialize when the user left the the box, sending the object element.
    var postId = document.getElementById("postId").value; // I got the post->ID to the hidden input text field.
    var field = content;
    var fieldName = content.name; // get the name of the element, because it will be the identity who we gonna change.
    var fieldValue = content.value; // get the value of the element.
    jQuery(document).ready(function($) {
       var elem = fieldName; //get the fieldName value
       var containValue = fieldValue; // get the contain value who will be updated 
    //console.log('fieldName: '+elem+' ContainValue: '+containValue );
       jQuery.ajax({ // We use jQuery instead $ sign, because Wordpress convention.
        url : 'https://example-site.com/wp-admin/admin-ajax.php', // This addres will redirect the query to the functions.php file, where we coded the function that we need.
        type : 'POST',
        data : {
            action : 'my_action', 
            fieldname : elem,
            fieldvalue : containValue,
            postid : postId
        },
        beforeSend: function() {
               //console.log('Updating Field');
        },
        success : function( response ) {
             //console.log('Success');
        },
        complete: function(){
            alert( "Field updated");
        }
       });
    });
   }
</script>

Finally, we going to create the action on the functions.php:

<?php
add_action( 'wp_ajax_my_action', 'my_action' );
add_action( 'wp_ajax_nopriv_my_action', 'my_action' ); // This lines it's because we are using AJAX on the FrontEnd.

function my_action(){
    $fieldname = $_POST['fieldname']; // This variable will get the POST 'fieldname'
    $fieldvalue = $_POST['fieldvalue'];  // This variable will get the POST 'fieldvalue'
    $postid = $_POST['postid'];             // This variable will get the POST 'postid'
    update_post_meta($postid, $fieldname, $fieldvalue); // We will update the field.
    wp_die($fieldname = '', $fieldvalue = '', $postid = ''); // this is required to terminate immediately and return a proper response
} 
?>

That's the way i found a solution. If somebody else want to share other option, feel free to show us here.

Welcome to the Treehouse Community

Looking to learn something new?

William Romero

William Romero

How update custom fields with ajax in Wordpress?

Andrew McCormick

Andrew McCormick

William Romero

William Romero

2 Answers

Andrew McCormick

Andrew McCormick

William Romero

William Romero