Hi there, I am relying on the acf.addAction('submit') hook for my frontend forms. Since the latest upgrade it doesn’t work anymore, a click on the submit button doesn’t do anything anymore. It seems like something in here is causing the error (acf-input.js):
/**
* onSubmit
*
* Callback when the form is submit.
*
* @date 4/9/18
* @since 5.7.5
*
* @param object e The event object.
* @param jQuery $el The input element.
* @return void
*/
onSubmit: function( e, $el ){
// Allow form to submit if...
if(
// Validation has been disabled.
!this.active
// Or this event is to be ignored.
|| this.get('ignore')
// Or this event has already been prevented.
|| e.isDefaultPrevented()
) {
// Return early and call reset function.
return this.allowSubmit();
}
// Validate form.
var valid = acf.validateForm({
form: $el,
event: this.get('originalEvent')
});
// If not valid, stop event to prevent form submit.
if( !valid ) {
e.preventDefault();
}
},
I think you have prevent default somewhere
@fdrv you where totally right! This was my old code:
/**
* Setup the ajax submit
*/
setupAjaxSubmit() {
$('.acf-form').on('submit', e => {
if( $(e.currentTarget).hasClass('is-ajax-submit') ) {
// because of this e.preventDefault the acf 'submit' action
// is not being triggered anymore starting with ACF 5.7.13
e.preventDefault();
}
});
acf.addAction('submit', ( $form ) => {
if( !$form.hasClass('is-ajax-submit') ) {
return true;
}
// my custom code for handling AJAX posting:
$form.acfFrontendForm('doAjaxSubmit');
});
}
…I changed it to this, now it’s working fine again (and also it’s much cleaner ;)):
/**
* Setup the ajax submit
*/
setupAjaxSubmit() {
acf.addAction('submit', ( $form ) => {
if( !$form.hasClass('is-ajax-submit') ) {
return true;
}
$form.on('submit', (e) => {
e.preventDefault();
});
// my custom code for handling AJAX posting:
$form.acfFrontendForm('doAjaxSubmit');
});
}
Actually, to make the form work again after submitting it, $form.one is better than $form.on, so the e.preventDefault() is only being triggered once:
/**
* Setup the ajax submit
*/
setupAjaxSubmit() {
acf.addAction('submit', ( $form ) => {
if( !$form.hasClass('is-ajax-submit') ) {
return true;
}
// only prevent the default of the submit action once:
$form.one('submit', (e) => {
e.preventDefault();
});
// my custom code for handling AJAX posting:
$form.acfFrontendForm('doAjaxSubmit');
});
}
