Reply To: Frontend form – post via ajax?

• Konrad Chmielewski

• April 14, 2018 at 9:14 pm

Hello!

Sorry for the late answer! In fact, if you use the argument 'uploader' => 'basic' in your acf_form call to use the native browser upload button, then it won’t be properly uploaded by the form.

For you information, 'uploader' => 'wp' (the WP upload popup) works, but I don’t want to show it on front forms. So I decided to re-work my code in order to make it fully compatible with the native browser uploader.

Here is the Javascript: https://gist.github.com/hawkidoki/6302e2ecddcc6e3a6150fabc4e8cae6c

I decided to rewrite the function acf.validation.fetch to use formdata instead of classic ACF Form ajax calls. Note that I remove the data.action = 'acf/validate_save_post' argument, because I’ll add my own Ajax action for each one of my ACF Forms.

Here is the PHP: https://gist.github.com/hawkidoki/e49fbc385794c1f1c5d8db1504723cea

Using the action acf/input/form_data, I’ll add my own <input type="hidden" name="action" value="hwk_ajax_acf_register_ajax_submit" />. Now the data.action is set, the Javascript call will understand what Ajax action I want to reach.

Then, I define my own PHP Ajax fonctions:

add_action('wp_ajax_hwk_ajax_acf_register_ajax_submit', 'hwk_ajax_acf_register_ajax_submit');
add_action('wp_ajax_nopriv_hwk_ajax_acf_register_ajax_submit', 'hwk_ajax_acf_register_ajax_submit');

• Checking the nonce with acf_verify_nonce(‘acf_form’)
• Validating data with acf_validate_save_post() (which call the action acf/validate_save_post)
• And finally, process my data…

I hope everything is clear. I also updated my article, so the login/register/lost password & account forms use the same method.

Let me know if you need some more explanations 🙂