Last active
September 5, 2024 12:02
-
-
Save Qubadi/da08ced02431169768e558483c4bf099 to your computer and use it in GitHub Desktop.
Enhanced input fields with clear button for JetFormBuilder
This file contains 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
| Updates Made 31.08.2024: | |
| Used input.onClear(): This method is used to clear the input field when available. | |
| Checked for Input Type: Added a check to skip adding the clear button for checkbox and radio input types to avoid issues. | |
| Description: | |
| Copy the following HTML code and create a HTML snippet using your snippet plugins. Paste the code into the plugin and save it. | |
| This code enhances the input fields in JetFormBuilder forms by adding a clear button that allows users to easily clear the input content. | |
| The clear button appears when there is input and disappears when the input is empty. It also includes a smooth hover effect for the | |
| clear button, changing its background and font colors. | |
| __________________________________________________________ | |
| <style> | |
| /* Field wrapper styling for positioning */ | |
| .jet-form-builder__field-wrap { | |
| position: relative; | |
| display: inline-block; | |
| width: 100%; | |
| } | |
| /* Clear button styling */ | |
| .clear-button-unique { | |
| position: absolute; | |
| top: 50%; | |
| right: 16px; | |
| transform: translateY(-50%); | |
| cursor: pointer; | |
| display: none; | |
| background-color: #e30303; | |
| border: none; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| text-align: center; | |
| z-index: 1; | |
| color: #ffffff !important; | |
| font-size: 12px; | |
| font-weight: bold; | |
| transition: background-color 0.3s ease, color 0.3s ease; | |
| padding: 0; | |
| line-height: 20px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| /* Hover effect for clear button */ | |
| .clear-button-unique:hover { | |
| background-color: #000; | |
| color: #fff; | |
| } | |
| /* Adjust position for clear button next to textarea */ | |
| .jet-form-builder__field-wrap textarea + .clear-button-unique { | |
| top: 8px; | |
| transform: none; | |
| } | |
| </style> | |
| <script> | |
| (function() { | |
| // Initialize clear buttons for form fields | |
| function initializeClearButtonsUnique() { | |
| const formFields = document.querySelectorAll('.jet-form-builder__field'); | |
| formFields.forEach(function(field) { | |
| if (['checkbox', 'radio', 'file', 'hidden'].includes(field.type) || ['select', 'image'].includes(field.tagName.toLowerCase())) { | |
| return; | |
| } | |
| const fieldWrap = field.closest('.jet-form-builder__field-wrap'); | |
| if (!fieldWrap) return; | |
| if (fieldWrap.querySelector('.clear-button-unique')) return; | |
| const clearButton = document.createElement('button'); | |
| clearButton.textContent = 'X'; | |
| clearButton.className = 'clear-button-unique'; | |
| clearButton.type = 'button'; | |
| fieldWrap.appendChild(clearButton); | |
| field.addEventListener('input', function() { | |
| clearButton.style.display = field.value.trim() ? 'block' : 'none'; | |
| }); | |
| clearButton.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| field.value = ''; | |
| clearButton.style.display = 'none'; | |
| field.dispatchEvent(new Event('input', { bubbles: true })); | |
| field.focus(); | |
| }); | |
| clearButton.style.display = field.value.trim() ? 'block' : 'none'; | |
| }); | |
| } | |
| // Hide all clear buttons after form submission | |
| function hideClearButtonsUnique() { | |
| const clearButtons = document.querySelectorAll('.clear-button-unique'); | |
| clearButtons.forEach(function(button) { | |
| button.style.display = 'none'; | |
| }); | |
| } | |
| // Clear all input fields after form submission | |
| function clearAllFieldsUnique() { | |
| const formFields = document.querySelectorAll('.jet-form-builder__field'); | |
| formFields.forEach(function(field) { | |
| field.value = ''; | |
| }); | |
| } | |
| // Initialize clear buttons when DOM is loaded | |
| if (document.readyState === 'loading') { | |
| document.addEventListener('DOMContentLoaded', initializeClearButtonsUnique); | |
| } else { | |
| initializeClearButtonsUnique(); | |
| } | |
| // Handle form submission | |
| const jetForm = document.querySelector('.jet-form-builder'); | |
| if (jetForm) { | |
| jetForm.addEventListener('submit', function(event) { | |
| setTimeout(function() { | |
| hideClearButtonsUnique(); | |
| clearAllFieldsUnique(); | |
| }, 0); | |
| }); | |
| } | |
| // Real-time update of clear button visibility | |
| document.addEventListener('input', function(event) { | |
| if (event.target.matches('.jet-form-builder__field')) { | |
| const clearButton = event.target.closest('.jet-form-builder__field-wrap').querySelector('.clear-button-unique'); | |
| if (clearButton) { | |
| clearButton.style.display = event.target.value.trim() ? 'block' : 'none'; | |
| } | |
| } | |
| }); | |
| })(); | |
| </script> |
Thank you for your comment and suggestion! We have updated the code to use hooks for applying the clear button, as you recommended. This has allowed us to remove the MutationObserver and streamline the implementation. Your input was very helpful!
you are welcome :)
another thing you may find useful is that input from the hook arguments has onClear method, so to clear a JetFormBuilder field value you may do input.onClear()
anyway, this is not that important
though it seems now you are not checking for input type, this may cause issues with checkbox/radio fields, which have many nodes
on the page where you have forms, you may check JetFormBuilder global variable https://i.imgur.com/1MJKeDd.png
Thank u again >)
Updates Made:
Used input.onClear(): This method is used to clear the input field when available.
Checked for Input Type: Added a check to skip adding the clear button for checkbox and radio input types to avoid issues.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You may use hooks to apply clear button, then there will be no need to use MutationObserver
https://gist.github.com/Crocoblock/be965b3804879d74d6a1c43b69134534 here is a simple example
jet.fb.input.makeReactive hook is trigger each time the input is initialized
input.nodes contains all HTML inputs related to a form field