Field Render

Display a button/submit input and define various customization. The button will natively submit the current form. A built-in Ajax setting allow to prevent the form submission and call a custom Ajax request instead.

Field Settings

Setting nameDescription
Button typeThe button value
Button valueThe button type, Button or Submit
The button class and ID
HTML before the button
HTML after the button
Enable Ajax call on click

Field Value

The value cannot be retrieved as the field isn’t saved as custom meta.

Ajax Request: PHP

When enabling the “Ajax call” setting, the current form submission will be prevented and process an Ajax request instead. You can add your own PHP logic for that request using the acfe/fields/button hook. Usage example:

/*
 * Button: Ajax Request
 * 
 * @array        $field    Field array
 * @bool/string  $post_id  Current post ID
 */
 
action('acfe/fields/button',                  $field, $post_id);
action('acfe/fields/button/name=my_button',   $field, $post_id);
action('acfe/fields/button/key=field_abc123', $field, $post_id);
add_action('acfe/fields/button/name=my_button', 'my_acf_button_ajax', 10, 2);
function my_acf_button_ajax($field, $post_id){
    
    wp_send_json_success('Success!');
    
}

Ajax Request: JavaScript

The following Javascript hooks let you trigger specific actions depending on the Ajax request status.

Before Ajax Request

/*
 * Button: Before Ajax Request
 * 
 * @jQuery  $el   jQuery field element
 * @Json    data  Ajax data
 */
 
action('acfe/fields/button/before',                  $el, data);
action('acfe/fields/button/before/name=my_button',   $el, data);
action('acfe/fields/button/before/key=field_abc123', $el, data);
acf.addAction('acfe/fields/button/before/name=my_button', function($el, data){
    
    // do_something();
    
});

Ajax Success

/*
 * Button: Ajax Success
 * 
 * @jQuery  $el   jQuery field element
 * @Json    data  Ajax data
 */
 
action('acfe/fields/button/success',                  $el, data);
action('acfe/fields/button/success/name=my_button',   $el, data);
action('acfe/fields/button/success/key=field_abc123', $el, data);
acf.addAction('acfe/fields/button/success/name=my_button', function($el, data){
    
    // do_something();
    
});

Ajax Complete

/*
 * Button: Ajax Complete
 * 
 * @jQuery  $el   jQuery field element
 * @Json    data  Ajax data
 */
 
action('acfe/fields/button/complete',                  $el, data);
action('acfe/fields/button/complete/name=my_button',   $el, data);
action('acfe/fields/button/complete/key=field_abc123', $el, data);
acf.addAction('acfe/fields/button/complete/name=my_button', function($el, data){
    
    // do_something();
    
});