Reply To: Use update_field() with AJAX

• Mark Notton

• July 16, 2014 at 11:43 pm

Thanks Hube2, you’re spot on. This is what worked for me:

I have a text input with the “Field Group” set as ‘test’

HTML

<form id="test-form" action="">
  <input type="text" name="input-test" value="<?php the_field('test'); ?>">
  <input type="submit" value="Update">
</form>

PHP (In the themes function.php file)

function test_function() {
  // Set variables
  $input_test = $_POST['input-test'];
  // Check variables for fallbacks
  if (!isset($input_test) || $input_test == "") { $input_test = "Fall Back"; }
  // Update the field
  update_field('test', $input_test);
}
add_action( 'wp_ajax_nopriv_test_function',  'test_function' );
add_action( 'wp_ajax_test_function','test_function' );

Javascript

var ajaxurl = 'http://'+window.location.host+'/wp-admin/admin-ajax.php';
var form = "#test-form";
  $(form).submit(function(event) {
    event.preventDefault();
    $.ajax({
      url: ajaxurl + "?action=test_function",
      type: 'post',
      data: $(form).serialize(),
      success: function(data) {
        console.log("SUCCESS!");
      },
      error: function(data) {
        console.log("FAILURE");
      }
    });
  });