Unable to get a dynamic form to work

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):

<style>
  #textarea-e0b21384-52e4-4c76-8f57-dcf92d7701bc,
  #name-d9c4852d-1168-411e-98c8-191f8535c74c,
  #email-3ce5a4c3-2487-41a9-a9ac-0d0aac9b6a11
  {
    display: none;
  }
<style>

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>

<script>
  $('#radio-3cdb8646-93a2-4da7-a004-e63f4f475151 input').click(function(){
    selection = $(this).val;
    if (selection == 'yes') {
    	$('.form-item').show();
    }
    
  });
</script>

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!

Can you share link to page where you use form?

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!

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

$(document).ready(function(){

  // 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.