Jump to content

Unable to get a dynamic form to work

Recommended Posts

Hi all,

I have the need to add a dynamic form to my site (currently unpublished as it's still a work in progress, but if publishing it incomplete will help, I can do so). I have a radio button, and if the response is 'yes,' I want to display an additional few questions. Searching YouTube, I found a great tutorial for this very option here. I'm able to follow her tutorial, but it is not functioning. 

Here is the code I've added to the header after inspecting the elements I want to hide until a user selects the 'yes' radio button (this code does indeed hide the questions):

    display: none;

Here is the javascript code I've added to the footer (this code appears to be non-functional):

<script   src="https://code.jquery.com/jquery-3.7.1.min.js"   integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="   crossorigin="anonymous"></script>

  $('#radio-3cdb8646-93a2-4da7-a004-e63f4f475151 input').click(function(){
    selection = $(this).val;
    if (selection == 'yes') {

The only difference I've noticed between her tutorial and my site, is that her radio button element is a <div>, whereas mine looks like this:

<fieldset class="form-item field radio" id = "radio-3cdb8646-93a2-4da7-a004-e63f4f475151"> = $0

If anyone can point me to a solution to get my dynamic form functional, I would be greatly appreciative. Please let me know if you have any additional questions!

Link to comment
  • 2 weeks later...
On 9/16/2023 at 9:46 PM, tuanphan said:

Can you share link to page where you use form?

Hi, thanks for the response! Sure, the application is now live, here's the link. What I'd like to add is the ability to hide the scholarship questions below the radio button unless the individual selects 'yes.' Any help or guidance would be greatly appreciated. Thanks!

Link to comment
  • 4 weeks later...

First thing I would say is you want to always wrap your code in the following function block:


  // your JS code here


Reason being that this code gets loaded in the header, meaning the browser sees it *before* any of the content of the body of website. So you're instructing jQuery what to do when the user clicks on this form element, or what to do with that div, but those don't exist yet.

What this does is basically says, when the document is 'ready' (the DOM is loaded, technically speaking), then run the code inside this block.

Your code looks good to me at a glance, so I think that might help. But this is always going to be the case when you're manipulating the DOM (basically, manipulating elements of the web page, triggered by events like clicks or scrolls, etc).

Hope that helps. You're definitely on the right track though.

Link to comment

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.