jQuery(function($) { /* * ========================================== * THIS FORM'S ID * ========================================== */ const formId = 89; const formSelector = '#gform_' + formId; /* * ========================================== * FORMAT USD * ========================================== */ function formatUSD(value) { value = value.toString().replace(/[^0-9.]/g, ''); if (value === '') { return ''; } return '$' + parseFloat(value).toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 }); } /* * ========================================== * ADVANCE TO NEXT STEP * ========================================== * * Finds the Next/Submit button belonging to * the given page and clicks it. */ function goToNextStep($page) { if (!$page || !$page.length) { return; } // Standard "Next" button on this page let $btn = $page.find('.gform_next_button').first(); // Fallback: last page has a submit button instead if (!$btn.length) { $btn = $page.find('input[type="submit"], .gform_button.gform_submit').first(); } if ($btn.length) { // Small delay so hidden-field change/input events // (and any GF validation binding to them) finish // processing before we navigate away. setTimeout(function() { $btn.trigger('click'); }, 50); } } /* * ========================================== * INITIALIZE SLIDERS * ========================================== * * Everything is scoped to this form only. */ function initNurSlider($form) { /* * ========================================== * DRAG-RELEASE DETECTION * ========================================== * * Delegated on document (scoped to this form) so it * keeps working across every AJAX page swap, regardless * of when/how each page's slider handle DOM is created: * - pointerdown/mousedown/touchstart on the handle * marks a real drag as started * - pointerup/mouseup/touchend on the handle is the * actual release, which triggers goToNextStep() */ $(document) .off('pointerdown.nursliderScoped mousedown.nursliderScoped touchstart.nursliderScoped', formSelector + ' .noUi-handle') .on( 'pointerdown.nursliderScoped mousedown.nursliderScoped touchstart.nursliderScoped', formSelector + ' .noUi-handle', function() { const $s = $(this) .closest('.gfield') .find('.nurslider') .first(); if ($s.length) { $s.data('user-interacted', true); } } ); $(document) .off('pointerup.nursliderScoped mouseup.nursliderScoped touchend.nursliderScoped', formSelector + ' .noUi-handle') .on( 'pointerup.nursliderScoped mouseup.nursliderScoped touchend.nursliderScoped', formSelector + ' .noUi-handle', function() { const $s = $(this) .closest('.gfield') .find('.nurslider') .first(); if ( $s.length && $s.data('user-interacted') ) { $s.data('user-interacted', false); goToNextStep($s.closest('.gform_page')); } } ); $form.find('.nurslider').each(function() { const $slider = $(this); /* * Prevent duplicate bindings */ $slider .off('change.nursliderScoped') .on('change.nursliderScoped', function() { /* * Skip changes caused by manual input */ if ( $slider.data('manual-input-update') ) { return; } const value = $slider.val(); /* * Only find fields inside * the current page containing * this slider. */ const $page = $slider.closest('.gform_page'); const $input = $page.find('.amount_input input') .first(); const $hidden = $page.find('input.gform_hidden') .first(); /* * Update visible input */ if ($input.length) { $input.data( 'slider-update', true ); $input.val( formatUSD(value) ); $input.data( 'slider-update', false ); } /* * Update hidden field */ if ($hidden.length) { $hidden.val( value.toString() .replace(/[^0-9.]/g, '') ); $hidden.trigger('input'); $hidden.trigger('change'); } /* * NOTE: auto-advance is handled by the * document-delegated pointerup/mouseup/ * touchend handler above, not here — this * 'change' event can fire repeatedly * mid-drag, so it's not a reliable * "released" signal. */ }); }); } /* * ========================================== * FORMAT INPUTS * ========================================== */ function applyFormatting($context) { $context .find('.amount_input input') .each(function() { const $input = $(this); const value = $input.val() .replace(/[^0-9]/g, ''); if (value) { $input.val( formatUSD(value) ); } }); } /* * ========================================== * INPUT → SLIDER * ========================================== * * Only fields inside THIS form. */ $(document).on( 'input change', formSelector + ' .amount_input input', function() { const $input = $(this); /* * Ignore slider-generated input */ if ( $input.data('formatting') || $input.data('slider-update') ) { return; } $input.data( 'formatting', true ); /* * Get only the current page */ const $page = $input.closest('.gform_page'); /* * Get slider belonging * to this page */ const $slider = $page.find('.nurslider').first(); /* * Get hidden field belonging * to this page */ const $hidden = $page.find('input.gform_hidden').first(); /* * Numeric value */ const raw = $input.val() .replace(/[^0-9]/g, ''); const $handle = $slider .closest('.gfield') .find('.noUi-handle') .first(); const min = 0; const max = parseInt( $handle.attr('aria-valuemax') ) || 0; let value = parseInt(raw || 0); /* * Validate maximum */ if ( max && value > max ) { value = max; } /* * Update formatted input */ $input.val( formatUSD(value) ); /* * Update hidden */ if ($hidden.length) { $hidden.val(value); } /* * Update slider */ if ( $slider.length && $slider.val() != value ) { /* * Tell slider that this * came from manual input. */ $slider.data( 'manual-input-update', true ); /* * noUiSlider */ if ($slider[0].noUiSlider) { $slider[0].noUiSlider.set( value ); } else { $slider.val(value); } /* * Gravity Forms change */ $slider.trigger( 'change' ); $slider.data( 'manual-input-update', false ); } $input.data( 'formatting', false ); } ); /* * ========================================== * PREVENT NON-NUMERIC CHARACTERS * ========================================== */ $(document).on( 'keypress', formSelector + ' .amount_input input', function(e) { if (!/[0-9]/.test(e.key)) { e.preventDefault(); } } ); /* * ========================================== * INITIAL LOAD * ========================================== */ function initializeForm() { const $form = $(formSelector); if (!$form.length) { return; } applyFormatting($form); initNurSlider($form); } initializeForm(); /* * ========================================== * GRAVITY FORMS PAGED NAVIGATION * ========================================== * * Gravity Forms replaces the page DOM, * so reinitialize the newly loaded page. */ $(document).on( 'gform_page_loaded', function( event, loadedFormId, currentPage ) { /* * IMPORTANT: * Only respond to THIS form. */ if ( parseInt(loadedFormId) !== parseInt(formId) ) { return; } const $form = $(formSelector); const $page = $('#gform_page_' + formId + '_' + currentPage); if (!$page.length) { return; } applyFormatting($page); initNurSlider($page); } ); });