ButtonFREE

#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

#Field Value

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

#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:

/**
 * acfe/fields/button
 * 
 * @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

/**
 * acfe/fields/button/data
 * 
 * @object  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

/**
 * acfe/fields/button/before
 * 
 * @jquery  $el   jQuery field element
 * @object  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

/**
 * acfe/fields/button/success
 * 
 * @object  response  Ajax response
 * @jquery  $el       jQuery field element
 * @object  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

/**
 * acfe/fields/button/complete
 * 
 * @string  response  Raw response
 * @jquery  $el       jQuery field element
 * @object  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);
    
});