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 Group

Field Settings

Setting nameDescription
Button typeThe button value
Button valueThe button type, Button or Submit
Button attributesThe button class and ID
Before HTMLHTML before the button
After HTMLHTML after the button
Ajax callEnable Ajax call on click

Field Value

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

Ajax Request: PHP

When the “Ajax call” setting is enabled, the current form submission will be prevented and an ajax request will be processed instead. You can add your own PHP logic for that request using the acfe/fields/button hook.

Other fields values will be passed within the $_POST['acf'] dataset. You can easily access those values using native ACF functions get_field(), have_rows(), get_sub_field(). 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){

    // retrieve field input value 'my_field'
    $my_field = get_field('my_field');
    
    // send json success message
    wp_send_json_success("Success! My Field value is: {$my_field}");
    
}

Ajax Request: JavaScript

The following Javascript hooks let you trigger specific actions depending on the Ajax request status. It is recommended to use the acf/input/admin_enqueue_scripts hook to enqueue a custom ACF JS file. See documentation.

Ajax Data

/*
 * Button: Ajax Data
 * 
 * @Json    data  Ajax data
 * @jQuery  $el   jQuery field element
 */
 
filter('acfe/fields/button/data',                  data, $el);
filter('acfe/fields/button/data/name=my_button',   data, $el);
filter('acfe/fields/button/data/key=field_abc123', data, $el);
acf.addFilter('acfe/fields/button/data/name=my_button', function(data, $el){
    
    // add custom key
    data.custom_key = 'value';    
    
    // return
    return data;
    
});

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){
    
        // log arguments
        console.log($el);
        console.log(data);
    
});

Ajax Success

/*
 * Button: Ajax Success
 * 
 * @jQuery  $el   jQuery field element
 * @Json    data  Ajax data
 */
 
action('acfe/fields/button/success',                  response, $el, data);
action('acfe/fields/button/success/name=my_button',   response, $el, data);
action('acfe/fields/button/success/key=field_abc123', response, $el, data);
acf.addAction('acfe/fields/button/success/name=my_button', function(response, $el, data){
    
    // json success was sent
    if(response.success){
        
        // log arguments
        console.log(response.data);
        console.log($el);
        console.log(data);
        
    }
    
});

Ajax Complete

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

    // log arguments
    console.log(response);
    console.log($el);
    console.log(data);
    
});