Home Forums General Issues update_field() with Ajax


update_field() with Ajax

  • Sorry for the double thread but I assume nobody responds to the ‘Solved’ ones.
    I’m following the example I found here to update a Custom Field via Ajax:

    What I have done is:

    (1) Add html form to my single-(post-type).php

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

    (2) Update_field function in functions.php

    function test_function() {
    	$input_test = $_POST['input-test'];
    	if (!isset($input_test) || $input_test == "") { $input_test = "Fall Back"; }
    	update_field('field-name', $input_test);
    add_action( 'wp_ajax_nopriv_test_function',  'test_function' );
    add_action( 'wp_ajax_test_function','test_function' );

    (3) Enqueue Js script in functions.php

    function theme_scripts() {
    	wp_enqueue_script( 'functionality', get_template_directory_uri() . '/js/functionality.js', array ( 'jquery' ), 1.1, true);
    	wp_localize_script('functionality', 'MyAjax',
    		'ajaxurl' => admin_url('admin-ajax.php'),
    		'postCommentNonce' => wp_create_nonce('myajax-post-comment-nonce')
    add_action( 'wp_enqueue_scripts', 'theme_scripts' );

    (3) Create Javascript file js/functionality.js

    jQuery(document).ready(function() {
      var ajaxurl = 'http://''/wp-admin/admin-ajax.php';
      var form = "#test-form";
      jQuery(form).submit(function(event) {
          url: ajaxurl + "?action=test_function",
          type: 'post',
          data: jQuery(form).serialize(),
          success: function(data) {
          error: function(data) {

    Not sure what I’m doing wrong. I get ‘Success’ but the field doesn’t get updated.

  • i’ve also tried a variation of this following the instructions shown here:
    same result. the field doesn’t get updated.
    can anyone offer some advice..?

  • In your second code snippet, you will need to provide the post ID of the post you’re updating.

    function test_function() {
    	$input_test = $_POST['input-test'];
    	if (!isset($input_test) || $input_test == "") { $input_test = "Fall Back"; }
    	update_field('field-name', $input_test, $post_id); // specify post ID
    add_action( 'wp_ajax_nopriv_test_function',  'test_function' );
    add_action( 'wp_ajax_test_function','test_function' );

    You will either need to add a hidden field your form that has the post ID and submits it or you will need to localize your script with the current post ID that you can add to the form submission. I’d probably go with the hidden post ID field because of the way you script submits the form.

  • thanks, i didn’t know that. i’d rather go with Option B (localize script with current post id). This is a test, so the way of submitting the info will change a lot. Could you give me an example of that?

    However there’s one more problem. Even if the post id is correct, the $input_test variable falls to ‘Fall Back’ which means $_POST[‘input-test’] reads an empty string instead of the value of the input with the name input-test.

  • To be honest, I’m not sure I can. You’re using this data: jQuery(form).serialize(), to submit the form data and you would need to add the post ID to this data. I don’t actually know how you would do this. This is why I’d use a hidden form field with the post ID to be updated.

  • How update custom fields with ajax ?

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘update_field() with Ajax’ is closed to new replies.