Update ACF without Reloading through AJAX

I tried to shorten that title as much as I could, but basically this article will explain, at a high level, how to update an Advanced Custom Field (ACF) in your WordPress theme by submitting a form through an AJAX request.

Why an ACF? Well, it doesn’t have to be for that. It’s only an example I’m using to demonstrate how data or inputs can be moved from a user form to the back end. Once you obtain the data in this way, you can do whatever you want with it.

Why through AJAX? This is the best part – it all happens without the browser having to refresh the page. (It’s done asynchronously.) Take a look at the diagram below and follow along with me.

how to send inputs from a form on wordpress to a function through ajax without reloading the page

Before we get into the data flow, there are 3 files in question that need to be set up in order for this to work. They are a WordPress page template, scripts.js, and functions.php.

In functions.php, [1] the ‘wp_enqueue_script’ function points to the code that contains our AJAX request in ‘js/scripts.js’.

The AJAX request requires a ‘url’ value, but in this case we need to use a global Javascript variable for that. [2] This is where ‘wp_localize_script’ comes in. Another article that explains how this function works can be found here. The first parameter is the handle which matches that of ‘wp_enqueue_script’. The second is an object that will be created. And the third is an array of variables. In this case, I only call one key called ‘ajaxurl’. The file admin-ajax.php, by the way, is located in wp-admin.php. (Don’t touch anything in there.)

Now we can start to follow the red arrows and see how our form input is passed along. [3] When the user hits the submit button, the magic happens.

The input is transferred over to the .js file and contained in a variable called ‘$formInput’. [4] That then gets passed on into the AJAX request as a key called ‘formInput’. [5] The key ‘action’ specifies the function called ‘your_function’ where the data is duly passed into.

Once there, it is used, in this example, to update an ACF. And all that is done without the page refreshing. Beautiful.

[6] You will notice that back in our AJAX request, that ‘.done( function (data) {…’ is called. Although there is no actual data that returns to ‘scripts.js’ that is normally contained in the ‘success’ key, this is still required. The data shown in the console log is “0”. But that will be shown at work in a later post.

[7] Finally, there are two ‘add_action’ functions under the ‘your_function’ function. (That’s a lot of use for the word ‘function’ in one sentence.) The second one is used for the case in which the user is not required to be logged on.

Once your data is successfully sent to the function, you are free to use it in any way you want. Astounding!

This entry was posted in wordpress and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *