title: Update custom Wordpress field using AJAX
body: <p>I'm trying to update a custom field in Wordpress using Ajax (e.g having a form text input replace the custom field text by the click of a button).
  I’m using the Advanced Custom Fields plugin and following the example I found here but this doesn't seem to work:
  <a href="https://support.advancedcustomfields.com/forums/topic/use-update_field-with-ajax/" rel="nofollow noreferrer">https://support.advancedcustomfields.com/forums/topic/use-update_field-with-ajax/</a></p>
  
  <p>What I have done is:</p>
  
  <p>(1) Add html form to my single-(post-type).php</p>
  
  <pre><code>&lt;form id="test-form" action=""&gt;
  &lt;input type="text" name="input-test" value="&lt;?php the_field('field-name'); ?&gt;"&gt;
  &lt;input type="submit" value="Update"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>(2) update_field function in functions.php (this is an ACF function)</p>
  
  <pre><code>function test_function() {
      $input_test = $_POST['input-test'];
      if (!isset($input_test) || $input_test == "") { $input_test = "Fall Back"; }
      update_field('field-name', $input_test);
      wp_die();
  }
  add_action( 'wp_ajax_nopriv_test_function',  'test_function' );
  add_action( 'wp_ajax_test_function','test_function' );
  </code></pre>
  
  <p>(3) Enqueue Js script in functions.php</p>
  
  <pre><code>function theme_scripts() {
      wp_enqueue_script( 'functionality', get_template_directory_uri() . '/js/functionality.js', array ( 'jquery' ), 1.1, true);
  
      wp_localize_script('functionality', 'MyAjax',
      array(
          'ajaxurl' =&gt; admin_url('admin-ajax.php'),
          'postCommentNonce' =&gt; wp_create_nonce('myajax-post-comment-nonce')
      )
  );
  }
  add_action( 'wp_enqueue_scripts', 'theme_scripts' );
  </code></pre>
  
  <p>(3) Create Javascript file js/functionality.js</p>
  
  <pre><code>jQuery(document).ready(function() {
    var ajaxurl = 'http://'+window.location.host+'/wp-admin/admin-ajax.php';
    var form = "#test-form";
    jQuery(form).submit(function(event) {
      event.preventDefault();
      jQuery.ajax({
        url: ajaxurl + "?action=test_function",
        type: 'post',
        data: jQuery(form).serialize(),
        success: function(data) {
          console.log("SUCCESS!");
        },
        error: function(data) {
          console.log("FAILURE");
        }
      });
    });
  });
  </code></pre>
  
  <p>Not sure what i'm missing because i'm very new with Ajax. I just get 'success' but the field doesn't get updated. I've also tried a variation shown here <a href="https://www.youtube.com/watch?v=Z0Jw226QKAM" rel="nofollow noreferrer">https://www.youtube.com/watch?v=Z0Jw226QKAM</a> with the same results.</p>