Does anyone know how to dynamically show/hide multiple form fields? | Community
Skip to main content
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by
Actually I was able to get the anwser but I would like to share on this thread incase someone in the future struggles with this issue:

<!-- jQuery Show Hide Toggle ! -->

<script type="text/javascript" src="/js/public/jquery-latest.min.js"></script>
<script type="text/javascript">
    // set no conflict mode for jquery
  var $jQ = jQuery.noConflict();

function updateProductCategory()
{
 if(jQuery("#FIELD NAME").val() == "FIELD VALUE")
  {
       jQuery("#FIELD SELECTION").parents("li:first").show();
       jQuery("#FIELD SELECTION").parents("li:first").show();
       jQuery("#FIELD SELECTION").parents("li:first").hide();
       jQuery("#FIELD SELECTION").parents("li:first").hide();
       
  }
  else if(jQuery("#FIELD NAME").val() == "FIELD VALUE")
  {
         jQuery("#FIELD SELECTION").parents("li:first").hide();
       jQuery("#FIELD SELECTION").parents("li:first").show();
       jQuery("#FIELD SELECTION").parents("li:first").show();
       jQuery("#FIELD SELECTION").parents("li:first").show();


  }
  else
  {
  jQuery("#FIELD NAME").parents("li:first").hide();
       jQuery("#FIELD SELECTION").parents("li:first").hide();
       jQuery("#FIELD SELECTION").parents("li:first").hide();
       jQuery("#FIELD SELECTION").parents("li:first").hide();
       jQuery("#FIELD SELECTION").parents("li:first").hide();
  }
}


jQuery(document).ready
(
 function()
 {
  updateProductCategory();
  
  jQuery("#FIELD NAME").change
  ( function()
   {
          updateProductCategory();
   }
  );

 }
);
</script>

 

6 replies

A
Anonymous
July 19, 2013
What fields are you talking about? If you are asking about having a State drop-down appear only after someone selects United States or have it say Province if something selects Canada I can provide you with the necessary files, code, etc.

Need to know a little more about what specifically you are looking to do.

Thanks
A
Anonymous
July 19, 2013
Thank you for responding Doug.

It's actually a very similiar situation just with different fields
go.clicksoftware.com/ClickConnectwithPartnerConnectAmericas.html

On this page above i want to hide all fields below "Country" until the first drop down is selected as either "Partner" or "Customer".  Because "Partners" and "Customers" should see different fields based on business requirements.

So when i try and duplicate the jQuery scripts for each field (following the instructions for the State example) and just change the variables (field names) it breaks.  I have very little experience with jQuery, so sorry if I'm not making sense.

Thank you any more information let me know.  Really appreciate it!
A
Anonymous
July 19, 2013
The article "Dynamic State and Province for US and Canada in forms" is more than half way to achieve that.
It just need minor chages to match your fields.
http://community.marketo.com/MarketoArticle?id=kA050000000KysHCAS

A
Anonymous
July 19, 2013
Hello BGomes - I understand and have a working prototype with the Custom Marketo Fields entered in the script - but what about if you need to hide/show dynamically multiple fields?

When I try to add multiple fields the script breaks.

Thank you again for responding!
A
Anonymous
July 23, 2013
I will take your exmaple Doug - if you are open....to sharing. Thanks!
A
Anonymous
Accepted solution
July 24, 2013
Actually I was able to get the anwser but I would like to share on this thread incase someone in the future struggles with this issue:

<!-- jQuery Show Hide Toggle ! -->

<script type="text/javascript" src="/js/public/jquery-latest.min.js"></script>
<script type="text/javascript">
    // set no conflict mode for jquery
  var $jQ = jQuery.noConflict();

function updateProductCategory()
{
 if(jQuery("#FIELD NAME").val() == "FIELD VALUE")
  {
       jQuery("#FIELD SELECTION").parents("li:first").show();
       jQuery("#FIELD SELECTION").parents("li:first").show();
       jQuery("#FIELD SELECTION").parents("li:first").hide();
       jQuery("#FIELD SELECTION").parents("li:first").hide();
       
  }
  else if(jQuery("#FIELD NAME").val() == "FIELD VALUE")
  {
         jQuery("#FIELD SELECTION").parents("li:first").hide();
       jQuery("#FIELD SELECTION").parents("li:first").show();
       jQuery("#FIELD SELECTION").parents("li:first").show();
       jQuery("#FIELD SELECTION").parents("li:first").show();


  }
  else
  {
  jQuery("#FIELD NAME").parents("li:first").hide();
       jQuery("#FIELD SELECTION").parents("li:first").hide();
       jQuery("#FIELD SELECTION").parents("li:first").hide();
       jQuery("#FIELD SELECTION").parents("li:first").hide();
       jQuery("#FIELD SELECTION").parents("li:first").hide();
  }
}


jQuery(document).ready
(
 function()
 {
  updateProductCategory();
  
  jQuery("#FIELD NAME").change
  ( function()
   {
          updateProductCategory();
   }
  );

 }
);
</script>

 

Terms & ConditionsAccessibility statement

Loading footer...