Good afternoon.

I added some jQuery to a form page to get some hidden text fields to be revealed when a user clicks on a specific radio button and got the following functionality to work, but after an hour or so it just suddenly stopped working. Was wondering if anyone might be able to provide some insight as to why it would stop working.

I’ve been helping a coworker add some functionality to a form page they’re working on that they will embed into an iFrame of a main landing page (form with popup when a button is clicked). We have a form with 2 radio buttons (one labeled Individual Customers and one labeled for Business Customers).

When the page loads there is a blank section under these radio buttons. But when a user clicks on the Business Customer radio button, we want 2 additional text fields to appear in that blank space.

I was included the following Javascript and snippet to the form page and got everything working as we wanted but then suddenly it would stop working the the hidden text fields would no longer appear when “Business Customer” radio is selected.

Here is the Unbounce HTML (acquired from Page Source) for just the section of the form I’m trying to control with the JS:

<form id="form-id">

    <div class="fields"> 

         <div class="lp-pom-form-field radio-group multi-group" id="container_untitled4">

                <div class="ub-input-item input-wrap optionsList" id="group_untitled4">

                      <div class="option" id="ub-option-untitled4-item-0">  

                           <input type="radio" id="untitled4_individual_interest" name="untitled4" value="Individual Interest" class="radio form-builder-radio-input form_elem_untitled4" required="">

                    </div>

                    <div class="option" id="ub-option-untitled4-item-1">

                          <input type="radio" id="untitled4_business_interest" name="untitled4" value="Business Interest" class="radio form-builder-radio-input form_elem_untitled4" required="">

                   </div>

               </div>

          </div>

          <div class="lp-pom-form-field single-line-text" id="container_business_company_name">

               <label class="main lp-form-label" for="business_company_name" id="label_business_company_name" style="height: auto;">

		 <span class="label-style">If Business Interest:</span>

	   </label>

               <input id="business_company_name" name="business_company_name" type="text" class="ub-input-item single text form_elem_business_company_name" placeholder="Company Name">

         </div>

         <div class="lp-pom-form-field single-line-text" id="container_business_number_of_users">

               <input id="business_number_of_users" name="business_number_of_users" type="text" class="ub-input-item single text form_elem_business_number_of_users" placeholder=" Number of Potential Users">

         </div>

So, in the form page itself I added this jQuery library as a “head” file in the Javascript tab at the bottom of the UI (Yes, within tags):

    src="https://code.jquery.com/jquery-3.5.1.min.js"

    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="

    crossorigin="anonymous">

Then I added this custom snippet as a “pre-body” snippet in the JS tab:

(document).ready(function(){
var ids = "#business_company_name, #business_number_of_users, #label_business_company_name";
(ids).hide();

('aname="untitled4"]').on('change', function(){
if((this).is(’:checked’) && (this).attr('id') == 'untitled4_business_interest' ) {
(ids).show();

}

else{

$(ids).hide();

}

});

});

All pretty straight forward. I created a JSFiddle here showing how it should work and that it does outside of Unbounce. (Note: to get it to work, when you open the fiddle, just be sure to select jQuery 3.4.1 from the Javascript Library dropdown. Sorry about this as the library keeps getting stripped out after saving my fiddle).

Of course I would include a link to both Unbounce pages but my coworker asked that I not share them as the site is technically live.

Any help any of you can provide would be greatly appreciated! And if there’s anymore info I can provide please don’t hesitate to ask.

Thanks!