Created
October 4, 2023 17:38
-
-
Save nkb-bd/2f75122d466fc26edf5b96da4860cd3e to your computer and use it in GitHub Desktop.
Fluent Forms : Number field with buttons
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Fluent Form : Creating a Number field with + / - Button embeded with the input field | |
| * Take a Numeric Field then add element class 'incremental-input', thats it | |
| */ | |
| add_filter('fluentform/rendering_field_data_input_number', function ($data) { | |
| if ($data['attributes']['class'] == 'incremental-input') { | |
| $data['settings']['prefix_label'] = '<button class="ff-btn-step-plus">+</button>'; | |
| $data['settings']['suffix_label'] = '<button class="ff-btn-step-minus">-</button>'; | |
| } | |
| return $data; | |
| }); | |
| add_action('wp_footer', function () { | |
| ?> | |
| <script> | |
| jQuery(document).ready(function ($) { | |
| $('.ff-btn-step-plus, .ff-btn-step-minus').click(function (e) { | |
| e.preventDefault(); | |
| const inputField = $(this).closest('.ff_input-group').find('input[type="number"]'); | |
| if (inputField.length) { | |
| let currentValue = parseFloat(inputField.val()) || 0; | |
| if ($(this).hasClass('ff-btn-step-plus')) { | |
| currentValue += 1; | |
| } else if ($(this).hasClass('ff-btn-step-minus')) { | |
| currentValue -= 1; | |
| } | |
| inputField.val(currentValue); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <?php | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello! Thanks for sharing this script. I have a really newbie question - may I know where should this script be uploaded to? Is it to the root Wordpress directory? Thank you!