From 834e5f3953865150479686a9e65a9a913307088e Mon Sep 17 00:00:00 2001 From: Saif Sultan Date: Tue, 14 Jan 2025 22:16:17 +0530 Subject: [PATCH 1/2] `gw-limit-columns-in-survey-field-to-single-selection.js`: Added snippet to limit columns in survey field to single selections. --- ...mns-in-survey-field-to-single-selection.js | 42 +++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 gravity-forms/gw-limit-columns-in-survey-field-to-single-selection.js diff --git a/gravity-forms/gw-limit-columns-in-survey-field-to-single-selection.js b/gravity-forms/gw-limit-columns-in-survey-field-to-single-selection.js new file mode 100644 index 000000000..19416d17f --- /dev/null +++ b/gravity-forms/gw-limit-columns-in-survey-field-to-single-selection.js @@ -0,0 +1,42 @@ +/** + * Gravity Wiz // Gravity Forms // Limit Columns in Survey Field to Single Selection + * https://gravitywiz.com/ + * + * Video: https://www.loom.com/share/cf1f7f5bb254430c8ae939d5d4b9ea20 + * + * Instructions: + * + * 1. Install this snippet with our free Custom JavaScript plugin. + * https://gravitywiz.com/gravity-forms-code-chest/ + */ +// Update to the Survey field ID on your form. +const fieldId = '1'; +document.addEventListener( 'change', function ( event ) { + + if ( event.target.type == 'radio' ) { + const selectedRadio = event.target; + + const field = selectedRadio.closest( `#field_${GFFORMID}_${fieldId}` ); + // Exit if the radio button is not within the target field. + if ( !field ) { + return; + } + + // Get the column ID of the radio button + const ariaLabels = selectedRadio.getAttribute( 'aria-labelledby' ).split(' '); + const columnId = ariaLabels.find(label => label.startsWith( 'likert_col_' )); + + if (columnId) { + // Find all radio buttons in the same table within the specified field/ + const table = selectedRadio.closest( 'table' ); + const radiosInColumn = table.querySelectorAll( `input[type="radio"][aria-labelledby*="${columnId}"]` ); + + // Deselect all other radio buttons in the same column/ + radiosInColumn.forEach(radio => { + if (radio != selectedRadio) { + radio.checked = false; + } + }); + } + } +}); From 5a06dd0c29d769f1614caa4fb5d8d8633cee41b2 Mon Sep 17 00:00:00 2001 From: Saif Sultan Date: Thu, 16 Jan 2025 22:23:00 +0530 Subject: [PATCH 2/2] `gw-limit-columns-in-survey-field-to-single-selection.js`: Added snippet to limit columns in survey field to single selections. --- ...mns-in-survey-field-to-single-selection.js | 42 +++++++++---------- 1 file changed, 19 insertions(+), 23 deletions(-) diff --git a/gravity-forms/gw-limit-columns-in-survey-field-to-single-selection.js b/gravity-forms/gw-limit-columns-in-survey-field-to-single-selection.js index 19416d17f..e9364c26a 100644 --- a/gravity-forms/gw-limit-columns-in-survey-field-to-single-selection.js +++ b/gravity-forms/gw-limit-columns-in-survey-field-to-single-selection.js @@ -11,32 +11,28 @@ */ // Update to the Survey field ID on your form. const fieldId = '1'; -document.addEventListener( 'change', function ( event ) { +// If you want to exclude a column from this behavior, set the column label here. +// If you don't want it to exclude any column, set it to an empty string. +const exceptionColumnLabel = 'Not Available'; - if ( event.target.type == 'radio' ) { - const selectedRadio = event.target; +$( document ).on( 'change', `#field_${GFFORMID}_${fieldId} input[type="radio"]`, function () { + const $selectedRadio = $(this); + const $td = $selectedRadio.closest('td'); - const field = selectedRadio.closest( `#field_${GFFORMID}_${fieldId}` ); - // Exit if the radio button is not within the target field. - if ( !field ) { - return; - } + // Skip logic if the column label matches the exception label. + if ( exceptionColumnLabel && $td.data('label') == exceptionColumnLabel ) { + return; + } + + const ariaLabels = $selectedRadio.attr( 'aria-labelledby' ).split( ' ' ); + const columnId = ariaLabels.find( label => label.startsWith( 'likert_col_' ) ) ; - // Get the column ID of the radio button - const ariaLabels = selectedRadio.getAttribute( 'aria-labelledby' ).split(' '); - const columnId = ariaLabels.find(label => label.startsWith( 'likert_col_' )); - - if (columnId) { - // Find all radio buttons in the same table within the specified field/ - const table = selectedRadio.closest( 'table' ); - const radiosInColumn = table.querySelectorAll( `input[type="radio"][aria-labelledby*="${columnId}"]` ); + if ( columnId ) { + // Find all radio buttons in the same column. + const $table = $selectedRadio.closest( 'table' ); + const $radiosInColumn = $table.find( `input[type="radio"][aria-labelledby*="${columnId}"]` ); - // Deselect all other radio buttons in the same column/ - radiosInColumn.forEach(radio => { - if (radio != selectedRadio) { - radio.checked = false; - } - }); - } + // Deselect all other radio buttons in the same column. + $radiosInColumn.not( $selectedRadio ).prop( 'checked', false ); } });