Skip navigation
All Places > Products > Support > Documents
Currently Being Moderated

    Show or Hide a Form Field Dynamically

    Version 1
      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)

       

       

       

        Comments

        Delete Document

        Close

        Are you sure you want to delete this document?

        More Like This