Dynamically add options to JotForm iframe

[email protected]

by Ryan Brackett

HTML

<h1>Dynamically add options to JotForm iframe</h1>
<a href="mailto:[email protected]">[email protected]</a>
<br/>
<br/> On my website, I have a list of doctors that I keep updated through a CMS. Each doctor has a profile page that shows a list of related locations. We are using a JotForm on every provider profile page through a provider page template.
<br/>
</br/>We wanted to add a "Preferred Locations" option to the form that would allow patients to choose a location, but it would have required either a different form for each provider and a lot of manual (duplicate) work. I asked myself: "Why can't we enter the info into the website CMS once, pull that from the page using jQuery and dynamically show those location options on the form?" That's what I did, and it rocks. I hope this helps you see how this can be accomplished. (This script also contains my iframe
Google Analytics tracking script.)
<br/>
<br/> The following list tells the form which options should be available on the form. Delete a location LI, click Run, and see it update in the form iFrame.
<ul class="locations">
  <li>Braselton</li>
  <li>Buford</li>
  <li>Dahlonega</li>
  <li>Gainesville</li>
  <li>Winder</li>
</ul>
<br/>

<div class="form">
  <script type="text/javascript" src="https://form.jotform.com/jsform/53284842603961"></script>
</div>

CSS

body {
  font-family: Arial;
  padding: 20px;
  line-height: 1.5em;
  font-size: 13px;
}

h1 {
  line-height: 1.3em;
}

.locations {
  border: 1px solid #dedede;
  padding: 20px 40px;
}

JavaScript

// Read the contents of the iframe.
     var iframe = $(".form iframe").contents();
     // Main function. Checks for errors. If none, event is sent to analytics.
     function fireEventga() {
       var errors = iframe.find(".form-button-error").length;
       // Send event to analytics
       if (!errors) {
         console.log("Submit Button Clicked!");
         ga('send', 'event', 'Page Form', 'OnMouseDown', 'Event Identifier - Form Submit');
       }
       // Do nothing.
       else {
         console.log("Check the form for errors");
       }
     }
     // Submit button clicked. The delay waits for errors to render and then fires main function.
     $(function () {
       iframe.find(".form-submit-button").click(function () {
         setTimeout(fireEventga, 200);
       });
     });

     var prefLocSelector = "label:contains('Preferred Loc') + div";
     // Get available locations and create array
     var locBank = [];
     $(".locations li").each(function () {
       locBank.push($.trim($(this).text().toLowerCase()))
     });
     var locBank = locBank;

     // Get locations from form and create array
     var locOptions = [];
     iframe.find(prefLocSelector).find(".form-checkbox-item label").each(function () {
       locOptions.push($.trim($(this).text().toLowerCase()))
     });
     var locOptions = locOptions;
     // Get locations that are not in the available locations list
     var locToRemove = [];
     var i = 0;
     jQuery.grep(locOptions, function (el) {
       if (jQuery.inArray(el, locBank) == -1) locToRemove.push(el);
       i++;
     });
     // Hide locations on the form that are not in the list
     $.each(locToRemove, function (index, value) {
       var value = value.toLowerCase().replace(/\b[a-z]/g, function (letter) {
         return letter.toUpperCase();
       });
       iframe.find(prefLocSelector).find(".form-checkbox-item:contains('" + value + "')").remove();
       console.log("Updating form location updated!");
     });