shiDMV Posted June 6, 2022 Share Posted June 6, 2022 (edited) Site URL: https://www.mmclassy.com/contact-us Hello wonderful people! I am currently trying to apply conditional logic to the "Event Type" select field on my form. I'd like the "Other, please specify" text field to be shown only if the "Other" option is selected. I assume this is possible because I've seen it done with the checkbox field in a video from 2019. Unfortunately I was not able to adapt this code to the select field. Does anyone know how to implement this feature? Edited June 6, 2022 by shiDMV melaniejaane 1 Link to comment
Solution jpeter Posted June 6, 2022 Solution Share Posted June 6, 2022 (edited) @shiDMV The javascript code below should work for you. Javascript (function(){ // The value of the "id" HTML attribute of the parent HTML element var PARENT_ID = 'select-61719a1c-6980-4b16-b86c-5a7ccff1e8e5-field'; // The value which will determine the visibility of the DEPENDENT_ID element var PARENT_VALUE = 'Other'; // The value of the "id" HTML attribute of the child HTML element. // This field will hide/show depending on the PARENT_VALUE var DEPENDENT_ID = 'text-48e31159-ed89-4857-9813-092474be4290'; /********************************************************************* * DO NOT ALTER BELOW THIS LINE UNLESS YOU KNOW WHAT YOU'RE DOING *********************************************************************/ // Initialize after the page has been loaded if (document.readyState === 'complete') { init(); } else { document.addEventListener("DOMContentLoaded", init, false); } function init() { // Load jQuery if not loaded if(!window.jQuery) { return loadJquery(init) } // Assign jQuery to a variable var $ = jQuery; // Get the parent element var $parentField = $('#' + PARENT_ID); // Get the dependent element var $dependentField = $('#'+ DEPENDENT_ID); // Hide the text field on page load $dependentField.hide(); // Show or hide the dependent field based on the PARENT_VALUE $parentField.on('change', function(evt){ if(evt.currentTarget.value == PARENT_VALUE ) { $dependentField.slideDown(); } else { $dependentField.slideUp(); } }); } function loadJquery(init) { var s = document.createElement('script'); s.src = 'https://code.jquery.com/jquery-3.6.0.min.js'; s.integrity = 'sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4='; s.crossorigin = 'anonymous'; s.onload = init; document.body.appendChild(s); }; })() Make sure to place this between <script> tags. For example: <script> // Place JS Code Here </script> QF6rBF69qS.mp4 Edited June 6, 2022 by jpeter Uploading video example melaniejaane, tuanphan and shiDMV 1 2 Link to comment
shiDMV Posted June 6, 2022 Author Share Posted June 6, 2022 4 hours ago, jpeter said: @shiDMV The javascript code below should work for you. This worked beautifully, thank you so much! tuanphan 1 Link to comment
ratkaj Posted May 17 Share Posted May 17 @jpeterI'm attempting to do the same but I'm stuck. Website -- https://www.academyforlittlelearners.com/time-off I'm hoping to implement if the answer below is no... (required) Yes No Then the following is shown: I am requesting part of the day off From in Central Time To in Central Time Can you help? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment