girafffee
commented
1 year ago Hi, @Lonsdale201. I appreciate your input in developing new features. I would like to inform you that a couple of the features you listed have already been implemented within the new version of JetFormBuilder (the release is expected next year). More specifically, we are talking about:
- Character counter for the textarea field
- Connecting two datepickers, disbale past dates
As for other features, their implementation will require a completely different approach to writing code. That is, I mean that your code will most likely work even after the release of a major version, but I will be able to offer a cleaner solution.
For example, to limit the number of selected checkboxes, we can write as follows:
let { addAction } = JetPlugins.hooks;
let checkboxLimit = 4;
addAction(
'jet.fb.input.makeReactive',
'jet-fb/custom',
input => {
const [ node ] = input.nodes;
if ( !node.classList.contains( 'checkboxes-field' ) ) {
return;
}
input.sanitize( value => value.slice( 0, checkboxLimit ) );
}
);Of course, this solution is very simple, which is why it has disadvantages compared to yours.
With your permission, I can take your code as a basis and rework it for the new version of the plugin. This will be a good example of migration of custom solutions. You can see the result on the wiki page in the Crocoblock/jetformbuilder repository
Lonsdale201
lifeact
ironwiller
Dear Crocoblock. I have seen the requests you have just summarised, either here or in the facebook group, and I have collected them and attached sample codes in case anyone needs them.
Note that Jetfombuilder 3.0 has brought new toys and much more, so these codes, although they will continue to work in the future, are recommended to switch to the new code structures. As I have time and get these 3.0 versions ready, I will keep updating this. The notation is now "Old Style" and "New Style"
The features below are small simple add-ons that would be useful if they were to be included in JetFormBuilder sooner rather than later.
Deselect function for the radio type field -> Fixed - The code has been changed to be valid only within the JFB. Amongst other things, this code was interfering with the JSF Radio filters, sorry I overlooked that.
Additional:
I've posted these before, along with example codes, I'm just pasting them here to keep them in one place:
https://github.com/Crocoblock/suggestions/issues/6159 - JetFormBuilder - Connecting two datepicker , disbale past dates - Code example added https://github.com/Crocoblock/suggestions/issues/6340 - JetFormbuilder - Media field new functions + New design (Code exmaples added) https://github.com/Crocoblock/suggestions/issues/5620 - JetFormBuilder - Disable past date in datepicker & Datetime (Code example added) https://github.com/Crocoblock/suggestions/issues/5816 - JetFormBuilder Tooltip function (Code example added)
1, Limit the selectable checkbox in the checkbox field -- Old Style The only thing, you need to add the " my_input_checkbox " classname for your checkbox field, or replace your own. Example picture: https://prnt.sc/4Megea-RF6V7 You can increase the maxChecked number. This script automatice creating a warning message. This warning message have a #warning-text2 ID so you can easy Modfily the style.
1, Limit the selectable checkbox in the checkbox field -- New Style
First step:
Create a new folder within your theme folder. Example image: https://prnt.sc/kNoSI0eay4r4 Add a folder name: mycustomscripts inside this folder create a new .js file : limitcheckbox.js open this file, and paste the following code (thanks to @girafffee to refactoring):
Step two open your functions.php (please use child theme!) and paste the following code:
// functions.php of your child theme or own plugin
const CHECKBOX_LIMIT_HANDLE = 'jet-fb-custom-checkbox-limit';
add_action( 'jet-form-builder/before-start-form-row', function ( \Jet_Form_Builder\Blocks\Types\Base $block ) { if ( 'checkbox-field' !== $block->get_name() ) { return; } wp_enqueue_script( CHECKBOX_LIMIT_HANDLE ); } );
add_action( 'wp_enqueue_scripts', function () { wp_register_script( CHECKBOX_LIMIT_HANDLE, get_stylesheet_directory_uri() . '/mycustomscripts/limitcheckbox.js', // for >= 3.0.0 JetFormBuilder array( 'jet-plugins' ), // for <= 2.1.11 JetFormBuilder // array() '1.0.0', true ); } );
Last step
Open your form (not the elementor) - and select your checkbox field. Exmaple image: https://prnt.sc/ec0_i4R7uzbl and add the following custom css name for your checkbox block: check-limit
2. Select all/deselect all funciton in the checkbox field -- Old Style
Before use this script you need to add a specific class for your checkbox in the jetformbuilder editor. See the example image: https://prnt.sc/-HA441Fh2m8P This script we are using the .anothercustomcheckbox if you use another class name, please replace all where you find the .anothercustomcheckbox with your own classname. Addition: Please note that the new checkbox does not follow the jetformbuilder standards, so you will need to modify the appearance of the checkbox using css. Everything is defined in the code, and you can find example css code below the script.
3. Deselect function for the radio type field -- Old Style
Character counter for the textarea field -- Old Style + New Style (Jetformbuilder 3.0 and above)
This code automatice detect your max character limit, so you only need to localize your FORM FIELD NAME Example Picture: https://prnt.sc/Ez8FklyRDEIZ So replace the #mytextarea with your own, or you can use my ID.
The code automatice create a new Class "my_charactercounter" - and will populate the max character, and the counter. This counter will appear, below your textarea field. The code also detects when the maximum number of characters entered reaches 80% and the counter turns red. You can overwrite the percentage value yourself and freely change the appearance.
If you're interested in how to make the character counter compatible with JetFormbuilder's save form progress add-on (Recommended only advanced users) - I've created an initial example code to get you started, you can find it here: https://www.codepile.net/pile/j0pJDqPJ
-- New Style
With the New JFB Update (3.0) You no longer need the code below. How can you do the character counter with the JetFormbilder 3.0?
Drop a calcuated field under your textarea field and copy the following macro: %myformfieldname(remaining)% OR
You can use the following macro and you can paste in the form field description if you want:
just replace my formfieldname with your own. The only thing you need to change in the macro is myformfieldname - to the Form Field Name you named it (your textare block) -- Old Style ``` jQuery(document).ready(function($) { const $textarea = $('#mytextarea'); const maxLength = $textarea.attr('maxlength'); const threshold = maxLength * 0.8; const $counter = $('').addClass('my_charactercounter'); $counter.text(`${$textarea.val().length}/${maxLength} karakter`); $textarea.on('input', function() { if ($(this).val().length > maxLength) { $(this).val($(this).val().substring(0, maxLength)); } $counter.text(`${$(this).val().length}/${maxLength} karakter`); if ($(this).val().length >= threshold) { $counter.css('color', 'red'); } else { $counter.css('color', ''); } }); $textarea.after($counter); }); ``` **5, Limit the repeater field** The only thing that you need to add your custom class like in the picture: https://prnt.sc/A_2M7ahL8ZLm ``` jQuery(document).ready(function($) { $('.limitedrepeater').on('click', '.jet-form-builder-repeater__new, .jet-form-builder-repeater__remove', function() { var rowCount = $('.limitedrepeater .jet-form-builder-repeater__row').length; var maxRows = 3; if (this.className.includes('remove') && rowCount > 0) { rowCount--; } if (rowCount >= maxRows) { $('.limitedrepeater .jet-form-builder-repeater__new').css('opacity', '0.5'); $('.limitedrepeater .jet-form-builder-repeater__new').prop('disabled', true); } else { $('.limitedrepeater .jet-form-builder-repeater__new').css('opacity', '1'); $('.limitedrepeater .jet-form-builder-repeater__new').prop('disabled', false); } }); }); ``` **Toggle password visibility button** No extra steps are needed. In this code, it finds the first password field type within the .jet-form-builder__field-wrap class and adds the password display button. ``` jQuery(document).ready(function($) { const $passwordInput = $('input[type="password"]').first(); const $container = $passwordInput.closest('.jet-form-builder__field-wrap'); const $showHideButton = $(''); $container.append($showHideButton); $showHideButton.on('click', function(event) { event.preventDefault(); if ($passwordInput.attr('type') === 'password') { $passwordInput.attr('type', 'text'); $showHideButton.html(''); } else { $passwordInput.attr('type', 'password'); $showHideButton.html(''); } }); }); ```   **7, Copy a select field selected item to another text text field (placeholder cant copy)** - Only support single value ``` window.addEventListener('load', function() { const telepulesElement = document.querySelector('#telepules'); /* ('#telepules'); Replace with your own Select field - FORM FIELD NAME */ if (!telepulesElement) return; telepulesElement.addEventListener('change', function() { const options = this.options; const selectedOptionValue = options[options.selectedIndex].value; if (selectedOptionValue !== '') { document.querySelector('#allat_elveszett_hol').value = options[options.selectedIndex].text; /* ('#allat_elveszett_hol') Replace with your own Text field - FORM FIELD NAME */ } }); }); ```