Skip navigation
All Places > Support > Documents
Log in to create and rate content, and to follow, bookmark, and share content with other members.

Show or Hide a Form Field Dynamically

Document created by 08b21bd4b65c4441fd72920f489da6afa097beae on Jan 2, 2015
Version 1Show Document
  • View in full screen mode
Say you want to build a form with a field that dynamically adds an extra field when a certain answer is selected.  For example, you can ask customers if they want to be called by a sales rep. 
If yes, display a field asking for the best time to call; otherwise, don't display that field.
The example below uses a required Yes/No field to trigger whether or not the next field displays, though with modifications you can change it to handle any triggering input. 
They're referred to below as the triggering field (the Yes/No field) and the dynamic field (the one that appears based on the Yes/No answer).
First, build your form with whatever fields you want, but make sure the triggering field is immediately followed by the dynamic field.  In the example below, the form has just two fields for simplicity: a triggering field "Yes or no" and the dynamic field "Website":

 

 

 

 

 

Click on the triggering field "Yes or No" then view its Field Specific properties in the right column.  Change it's type to a "Select" box, set it to required, and set it's Value List to "-- Select --,Yes::Yes,No::No" like so:

 

 

 

 

 

 

Now create a landing page, add the form, and add this custom Javascript as a Custom HTML element.  You need to make two changes for your own Javascript:

 

 

Note

 

 

 

Please ensure that you have access to an experienced JavaScript developer. Marketo Technical Support is not set up to assist with troubleshooting custom JavaScript.

 

  • Change #Yesorno to the ID of the field of your triggering field

  • Change #Website to the ID of your dynamic field

 

 

<script type="text/javascript" src="/js/public/jquery-latest.min.js"></script>

 

<script type="text/javascript">
var $jQ = jQuery.noConflict();
$jQ(document).ready(function(){

 

   // some variables to track the LI and input element of the dynamic field
  var websiteRow = $jQ("#Website").parents("li:first");
  var websiteField = $jQ("#Website");

 

   // when the triggering field changes...
  $jQ("#Yesorno").change(function() {
    var value = this.value;

 

     // when "Yes", show the dynamic field and make it required
     // when "No", hide the dynamic field
    switch(value)
    {
      case "Yes":
         websiteField.addClass("mktFReq");
         websiteRow.addClass("mktFormReq").slideDown();
         break;

 

      default:
         websiteRow.removeClass("mktFormReq").slideUp();
         websiteField.removeClass("mktFReq");
    }
  }).change();

 

});

 

</script>

 

 

 

After that, you should be able to see the results when you preview the page:

 

 

State

 

 

Preview

 

 

First load

 

 

 

 

No selected

 

 

 

 

Yes selected (with dynamic field)

 

 

 

Attachments

    Outcomes