How to save acf_form data using ajax [Advanced Custom Fields - Wordpress]
Wednesday, January 27, 2016
Here is the simplest tutorial by which you can save the acf_form data on ajax_call without the page refresh.
Initially, I expect that you have enough knowledge of acf_form as well as Advance Custom Fields.
STEP :1 Now, Open your page/template file and paste the code given below:
<?php /*
Template Name: acf
*/
acf_form_head(); ?>
<?php get_header(); ?>
<div id="primary" class="content-area" style="width: 70%; padding-left: 7%; ">
<div id="content" class="site-content" role="main">
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php $args = array(
'post_id' => 'YourPostId',
'form_attributes' => array(
'class' => 'new-campaign-form',
'id'=>'modalAjaxTrying'
),
'field_groups' => array(2537), //field group id
'submit_value' => __("Save and Continue", 'acf'),
);
acf_form( $args );
?>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
STEP : 2 Open your js file and paste the code given below (You can also paste this on the same template page):
<script type="text/javascript">
jQuery('form#modalAjaxTrying :submit').click(function(event){
event.preventDefault();
var form_data = {'action' : 'acf/validate_save_post'};
jQuery('form#modalAjaxTrying :input').each(function(){
form_data[jQuery(this).attr('name')] = jQuery(this).val()
})
form_data.action = 'save_my_data';
jQuery.post(ajaxurl, form_data)
.done(function(save_data){
alert('Added successFully :');
})
})
})
</script>
STEP 3: Open functions.php and add these two actions
add_action( 'wp_ajax_save_my_data', 'acf_form_head' );
add_action( 'wp_ajax_nopriv_save_my_data', 'acf_form_head' );
You're DONE :)
Now save and check. Let me know if you face any error.
Initially, I expect that you have enough knowledge of acf_form as well as Advance Custom Fields.
STEP :1 Now, Open your page/template file and paste the code given below:
<?php /*
Template Name: acf
*/
acf_form_head(); ?>
<?php get_header(); ?>
<div id="primary" class="content-area" style="width: 70%; padding-left: 7%; ">
<div id="content" class="site-content" role="main">
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php $args = array(
'post_id' => 'YourPostId',
'form_attributes' => array(
'class' => 'new-campaign-form',
'id'=>'modalAjaxTrying'
),
'field_groups' => array(2537), //field group id
'submit_value' => __("Save and Continue", 'acf'),
);
acf_form( $args );
?>
<?php endwhile; ?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
STEP : 2 Open your js file and paste the code given below (You can also paste this on the same template page):
<script type="text/javascript">
jQuery('form#modalAjaxTrying :submit').click(function(event){
event.preventDefault();
var form_data = {'action' : 'acf/validate_save_post'};
jQuery('form#modalAjaxTrying :input').each(function(){
form_data[jQuery(this).attr('name')] = jQuery(this).val()
})
form_data.action = 'save_my_data';
jQuery.post(ajaxurl, form_data)
.done(function(save_data){
alert('Added successFully :');
})
})
})
</script>
STEP 3: Open functions.php and add these two actions
add_action( 'wp_ajax_save_my_data', 'acf_form_head' );
add_action( 'wp_ajax_nopriv_save_my_data', 'acf_form_head' );
You're DONE :)
Now save and check. Let me know if you face any error.
3 comments
Hi, thanks for this tutorial.
ReplyDeleteI did find one small error in your example code: the .js has too many closes "})". Needed to remove one from the end!
Also worth pointing out that the $post_id can be left empty to default to "this post" in the template, which is probably wanted often.
'post_id' => 'YourPostId',
...becomes simply...
'post_id' => '',
But anyway - thanks for your example, this got me the functionality I needed very quickly. Saved me many hours of messing around! Much appreciated.
Jon
Showing ajaxurl is undefined
ReplyDelete(index):721 Uncaught ReferenceError: ajaxurl is not defined
image uploading and radio buttons are not working
ReplyDelete