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.
Setting name | Description |
Button type | The button value |
Button value | The button type, Button or Submit |
Button attributes | The button class and ID |
Before HTML | HTML before the button |
After HTML | HTML after the button |
Ajax call | Enable Ajax call on click |
The value cannot be retrieved as the field isn’t saved as meta data.
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}");
}
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);
});