Jump to content

Form Block: Conditional Logic For "Other, Please Specify."

Go to solution Solved by jpeter,

Recommended Posts

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 by shiDMV
Link to comment
  • Solution

@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>

 

Edited by jpeter
Uploading video example
Link to comment
  • 11 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.