js - WPCode Library

Jetformbuilder – Parse Repeater on Review Page

jQuery(() => { const { addFilter, addAction } = JetPlugins.hooks; const { Filter } = JetFormBuilderAbstract; function RepeaterFilter() { Filter.call(this); this.getSlug = function () { return ‘repeaterTemplate’; }; /** * @param value {ObservableRow[]} */ this.apply = function (value) { const…Continue reading

JetFormBuilder – Submit Loader

document.addEventListener(‘DOMContentLoaded’, function() { var form = document.querySelector(‘.jet-form-builder’); if (form) { form.addEventListener(‘submit’, function(event) { var loader = document.getElementById(‘formLoader’); if (loader) { loader.style.display = ‘block’; } }); document.addEventListener(‘jet-form-builder/ajax/success’, function(event) { var loader = document.getElementById(‘formLoader’); if (loader) { loader.style.display = ‘none’; } });…Continue reading

JetFormBuilder – Extra Validation

jQuery(document).ready(function() { // Function to validate the form function customValidateForm() { let isValid = true; // Iterate over form fields and validate jQuery(‘.jet-form-builder .jet-form-builder__field’).each(function() { if (!jQuery(this).val()) { isValid = false; jQuery(this).addClass(‘error’); // Add an error class to invalid fields…Continue reading

JetFormBuilder – Masks Number Input Field

document.addEventListener(‘DOMContentLoaded’, function() { function formatCurrency(input) { var number = parseFloat(input.replace(/,/g, ”)); if (!isNaN(number)) { return number.toLocaleString(‘en-US’, { style: ‘currency’, currency: ‘USD’, minimumFractionDigits: 0, maximumFractionDigits: 0 }); } else { alert(‘Please enter a valid number.’); return ”; } } function handleBlur(event)…Continue reading

JS [Paid Member Subscriptions & Profile Builder]: Adjust Position of Country Input Field and Pre-Select Country on Billing Form

// This code snippet is intended to added the style class to country that will position it under the state input. // This code also pre-selects the United States as the country in the dropdown and disables the State field…Continue reading

JS [Paid Member Subscriptions & Profile Builder]: Adjust Position of Country Input Field and Pre-Select Country on Billing Form

// This code snippet is intended to added the style class to country that will position it under the state input. // This code also pre-selects the United States as the country in the dropdown and disables the State field…Continue reading

Progress Bar Javascript

// progress-bar.js document.addEventListener(‘DOMContentLoaded’, function() { document.querySelectorAll(‘.bar-group’).forEach(function(bar) { const range = parseInt(bar.getAttribute(‘data-range’), 10); const current = parseInt(bar.getAttribute(‘data-current’), 10); const percentage = (current / range) * 100; bar.querySelector(‘.progress-fill’).style.width = percentage + ‘%’; }); });Continue reading

Colour Switch – Sync with Device Colour Scheme

// Function to apply the color scheme function applyColorScheme(scheme) { if (scheme === ‘dark’) { document.documentElement.classList.add(“us-color-scheme-on”); document.querySelector(‘input[name=”us-color-scheme-switch”]’).checked = true; } else { document.documentElement.classList.remove(“us-color-scheme-on”); document.querySelector(‘input[name=”us-color-scheme-switch”]’).checked = false; } } // Detect the preferred color scheme const prefersDarkScheme = window.matchMedia(“(prefers-color-scheme: dark)”).matches; if…Continue reading

AJAX Grid Search (single grid)

document.addEventListener(‘DOMContentLoaded’, function () { const searchInput = document.querySelector(‘#gridSearch input[type=”text”]’); const searchForm = document.querySelector(‘#gridSearch form’); // Adjust if your search is within a form const gridResults = document.querySelector(‘.grid-results’); // The container that will display search results // Disable form submission to…Continue reading

AJAX Grid Search (multiple grids)

document.addEventListener(‘DOMContentLoaded’, function () { const searchInput = document.querySelector(‘#gridSearch input[type=”text”]’); const searchForm = document.querySelector(‘#gridSearch form’); // Adjust if your search is within a form const initialGrid = document.querySelector(‘.initial-grid’); // The initial content to hide when searching const gridResults = document.querySelector(‘.grid-results’); //…Continue reading