Reply To: Frontend form – post via ajax?

• rtpharry

• March 15, 2020 at 2:35 am

A follow up to this, that might help people out wanting to get the new post_id.

It’s difficult to get the post_id back when you use an acf_form to make a new_post.

In the end I solved it by hooking the acf_form_head in at the wp action hook.

Then I handled the acf/submit_form and short circuited the reply with wp_send_json_success

So I registered these hooks:

public function plugin_init()
{
    add_action('wp', array(&$this, 'acf_form_handler'));
    add_action('acf/submit_form', array(&$this, 'acf_checkout_prevent_pet_redirect'), 10, 2);

}

And used this:

        /**
         * Inject the ACF form handler on checkout pages
         */
        public function acf_form_handler()
        {
            if (is_checkout()) {
                acf_form_head();
            }
        }

For me, I needed them in the is_checkout() pages only. Tweak your code as required.

The wp event is the first event that you can use conditionals, but its before any output so you can override the reply later on.

The documentation is a bit misleading here as in one place it just says put acf_form_head() before the wp_head but somewhere else it does say before any html. Most of the time the first is fine but if you want to put your own json reply in its place then you need the wp hook.

        /**
         * Prevent redirect on AJAX pet create
         */
        public function acf_checkout_prevent_pet_redirect($form, $post_id)
        {
            if (is_checkout()) {
                if ($form['post_id'] === "new_post") {
                    // fix "pet" post type creation
                    if ($form['new_post']['post_type'] == 'pet' && $form['new_post']['post_status'] == 'publish') {
                        // cannot alter $form['return'] object,
                        // so it's safe to just die here,
                        // to avoid the redirect issue
                        exit;
                    }
                    
                    // fix "prescription" post type creation
                    if ($form['new_post']['post_type'] == 'prescription' && $form['new_post']['post_status'] == 'publish') {
                        wp_send_json_success(array(
                            'post_id' => $post_id
                        ));
                        exit;
                    }
                }
            }
        }

(The redirect issue that I mention in the comments is probably something that you have come across – the response tries to redirect to (site)/admin-ajax.php?updated=true which gives a silent 400 error.)

Then in my javascript, the response is now a javascript object. So merge this into the same part of the reply above:

            acf.lockForm($form);

            jQuery.ajax({
              url: window.location.href,
              method: 'post',
              data: formData,
              cache: false,
              processData: false,
              contentType: false,
            }).done(response => {
              acf.unlockForm($form);
              console.log(response);
              if(response.success) {
                console.log(response.data.post_id);
              }
              addFormSuccessCallback(response.data.post_id);
            });