Question 165024 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can Jquery update ACF fields with multiple values from a front-end using Ajax?

I need to update ACF custom field with Ajax from front-end. Basically, this is working when one value is added. But I need to add multiple values like posts ID’s.

It’s working when I’m saving value with ID like this: value="5"
And I need to save something like this: value="5, 9, 6, 3"

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, 2);
}
add_action( 'wp_ajax_nopriv_test_function', 'test_function' );
add_action( 'wp_ajax_test_function', 'test_function' );

<script>
var ajaxurl = '<?php echo admin_url('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");
      }
    });
  });
</script>

<form id="test-form" action="">
  <input type="text" name="input-test" value="<?php the_field('test'); ?>">
  <input type="submit" value="Update">
</form>
  1. Also I need to convert this code to jQuery Ajax with loader icon.
  2. Also I need to change "Update" button text to "Updated" when procedure done.

Could somebody help me fix that? Thanks!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you Nasir! Yes, exactly. I need that! But I tried update "part one", but it's not saving to ACF taxonomy field. After submit, the field is cleared and empty. Not working that way. Any idea? Thanks!

    ACF Taxonomy Field: [1]: https://phpout.com/wp-content/uploads/2023/05/0A6X3.png

    Example Front-end Form with ID's (input will be hidden in future, ID will be added automatically if user will open the page. I'm trying to do "Follow" functionality with ACF) [2]: https://phpout.com/wp-content/uploads/2023/05/Ldrto.png

    After addition of another ID and with form submit, it's not saved, it's cleared. Values should save this way "value: "7,3, new-ID" and ID of this will be visible also on admin area in ACF field as post-name. Do you understand me? Thanks!


  2. 0

    If I understood your question you want to be able to send multiple IDs separated by commas (or anything else) in the input field and use these IDs independently on your server.

    On your server side, update to this:

    function test_function() {
  // Set variables
  $input_test = $_POST['input-test'];
  // Check variables for fallbacks
  if (!isset($input_test) || $input_test == "") { 
    $input_test = "Fall Back";
    return 'failed'; // The request is problematic, so stop execution
  }
  
  $items = explode($input_test, ","); // Breaks the input IDs using comma as the delimiter
  foreach ($items as $item) {
    // Update the field
    update_field('test', $item, 2); // Update individual IDs present
  }
  return 'success'; // We got through to the end, Yay!!!
}

    Now, to the JQuery Ajax with loader and the button text.
    First, you have to note that Ajax requests have their own success method and it has nothing to do with the success of your actual transaction.
    In your code, your server script does some form of validation and returns an error message, Ajax has no business with this error message that your code throws. It only returns an error if there was a problem with send the request or receiving a response from the server mostly due to network connectivity. Now pay close attention to how the following code works.
    First you need a loader icon on your page that will be hidden display:none let’s say it has a css class .loader, it can be a font-awesome icon, an image, anything you like

    $(form).submit(function(event) {
  event.preventDefault();
  $('.loader').show(); // Display the loading icon since we are about to start a server request.
  $.ajax({
    url: ajaxurl + "?action=test_function",
    type: 'post',
    data: $(form).serialize(),
    success: function(data) {
      console.log("SUCCESS!"); // The Ajax request was successful
      if (data == 'success') { // The server did flag the request as successful
        location.reload(); // Refresh the page to see new changes
      } else {
        console.log("Data received by the server is problematic");
      }
    },
    error: function(data) {
      console.log("FAILURE");
    },
    complete: function() {
      $('.loader').hide(); // Hide the loading icon now that the request is complete.
    }
  });
});

    Now you can meddle with the requests, responses, animations and transitions however you wish

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search