At some point in the past, I found code that helped me set up a frontend page with multiple forms using acf_form and supposedly use ajax to submit. I revisited this project recently and found that the page refreshes every time I hit any of the forms’ submit buttons. I have not been able to find the source of this code again. Perhaps someone can take a look and help me figure out why my page is refreshing? Thanks.
jQuery(function($) {
acf.add_filter('validation_complete', function( json, form ) {
if( !json.errors ) {
form.submit(function(event) {
// I WOULD THINK THE LINE BELOW SHOULD PREVENT THE REFRESH?
event.preventDefault();
submitACF_AJAX(this);
return false;
});
}
return json;
});
// NOTE: I TRIED USING A PLAIN LINK ON CLICK TO TRIGGER THE FUNCTION
// RATHER THAN USING THE SUBMIT BUTTON. PAGE STILL REFRESHES.
function submitACF_AJAX(form) {
var data = new FormData(form);
$.ajax({
type: 'POST',
// I TRIED COMMENTING OUT THE LINE BELOW. HAD NO EFFECT.
url: window.location.href,
data: data,
processData: false,
contentType: false
})
.done(function(data) {
// I TRIED BOTH WITH AND WITHOUT THIS LINE...
window.location.reload(false);
$(form).trigger('acf_submit_complete', data);
})
.fail(function(error) {
$(form).trigger('acf_submit_fail', error);
});
}
});
Well…for reasons I do not quite understand, my code is now working correctly without refreshing the page. So I guess this can be disregarded.
