Support

Account

Home Forums ACF PRO Are there JS triggers for when an acf_form() is submitting/completed/failed?

Solved

Are there JS triggers for when an acf_form() is submitting/completed/failed?

  • I have a page with a front-end acf_form(). When I click Update, the little spinner appears and the page refreshes with the query variables. All great so far. But, to tie it in more closely with my design, I’d like to trigger my full-page visual loader when the Update button is clicked.

    I can add this easily enough on a click event:

    $('.acf-button').click(function(e) {
    	showLoadingBlocker(true);
    });

    …but if there’s an error (for example, the field/checkbox is required), I want to hide that full-page loader with showLoadingBlocker(false), but I can’t figure out how. I was wondering if there’s a custom trigger that gets fired when an acf_form() encounters an error, or any other event?

    Potentially I could add a DOM Mutation Observer to listen for error classes in the button’s parent form, but it seems like overkill when listening for a trigger would be much more straightforward, if possible.

  • The only thing I see built into ACF is a filter that is called after validation is completed https://www.advancedcustomfields.com/resources/adding-custom-javascript-fields/#filters.

    You can probably look in json.errors to see if there was an error. There isn’t anything on the JS side of things that will be triggered after the page is submitted and the fields are updated. All of the update process happens in PHP

    On the PHP side, acf/save_post is always triggered and you can use this action before or after acf saves the values depending on the priority you set. https://www.advancedcustomfields.com/resources/acf-save_post/. Normally, acf redirects after all acf/save_post actions.

    You can potentially add a url query variable in to the acf return value in acf_form() and then have a ready event that looks for that value to determine what to do next. Or you could create an acf/save_post action and hijack the redirect and do your own redirect before ACF does it’s thing.

  • Perfect, thank you! The first part of your answer solved my question. I kept my .click() method and then added the following:

    acf.add_filter('validation_complete', function( json, $form ){
    	if (json.errors) {
    		showLoadingBlocker(false);
    	}
    	
    	return json;
    });

    I realise I couldn’t do anything exclusively with JS after the form submission had gone through and the page redirected, but all I was really looking for was that kind of JS error handler.

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

The topic ‘Are there JS triggers for when an acf_form() is submitting/completed/failed?’ is closed to new replies.