如何在不刷新页面的情况下使用ajax保存acf_form [英] how to save acf_form using ajax without page refresh
本文介绍了如何在不刷新页面的情况下使用ajax保存acf_form的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这三个acf_form.我想一一展示这些表单,也想在不通过页面刷新的情况下通过ajax单击按钮保存每个表单.现在,每当我更新时,它就会刷新页面.我不会通过显示来显示&使用js进行阻止.
I have theese three acf_form. I want to show these form one by one as well as I want to save every form on button click through ajax without page refresh. Right now it's refreshing page whenever I update. I will show through display none & block using js.
<div class="SetupNew">
<h2>Setup Deals To Attract New Clientele</h2>
<p>Example: buy $15 get $30 for services</p>
<a href="javascript:void(0)"><p id="newDealsTxt">[Click Here To Setup] </p></a></div>
<?php acf_form($args = array(
'post_id' => $post_id,
'field_groups' => array(2029),
'form_attributes' => array(
'id'=>'newDeals'
),
)); ?>
<div class="SetupEx">
<h2>Setup Deals To Bring In Clientele During Nonpeak Hours</h2>
<p>Example: buy $15 get $30 for services Tue-Thur 9am - 2pm.</p>
<a href="javascript:void(0)"><p id="exDealsTxt">[Click Here To Setup]</p></a></div>
<?php acf_form($args = array(
'post_id' => $post_id,
'field_groups' => array(2047),
'form_attributes' => array(
'id'=>'exDeals'
),
)); ?>
<div class="SetupFb">
<h2>Setup $5 Off Coupon To Increase Testimonials And Sharing</h2>
<p>Example: Leave a testimonial and get $5 off your next service.</p>
<a href="javascript:void(0)"><p id="fbDealsTxt">[Click Here To Setup] </p></a></div>
<?php acf_form($args = array(
'post_id' => $post_id,
'field_groups' => array(2123),
'form_attributes' => array(
'id'=>'fbDeals'
),
)); ?>
<a href="javascript:void(0)"><h2 id="backk">Back << </h2> </a>
推荐答案
这来得很晚,但是我今天遇到了同样的问题.供参考,这是我的javascript:
This comes pretty late, but I had the same problem today. For reference, here's my javascript:
// call this function on document ready or when your ajax page is loaded
function renderPage() {
// initialize the acf script
acf.do_action('ready', $('body'));
// will be used to check if a form submit is for validation or for saving
let isValidating = false;
acf.add_action('validation_begin', () => {
isValidating = true;
});
acf.add_action('submit', ($form) => {
isValidating = false;
});
$('.acf-form').on('submit', (e) => {
let $form = $(e.target);
e.preventDefault();
// if we are not validating, save the form data with our custom code.
if( !isValidating ) {
// lock the form
acf.validation.toggle( $form, 'lock' );
$.ajax({
url: window.location.href,
method: 'post',
data: $form.serialize(),
success: () => {
// unlock the form
acf.validation.toggle( $form, 'unlock' );
}
});
}
});
}
这篇关于如何在不刷新页面的情况下使用ajax保存acf_form的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文