Does anyone know how to dynamically show/hide multiple form fields?

[Anonymous]

I see that there is this script -
http://community.marketo.com/MarketoArticle?id=kA050000000KyqqCAC

but what if you wanted to dynamically hide or show multiple fields? 

Any help would be much appreciated.

Thank you!

[Anonymous]

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

[Anonymous]

Thank you for responding Doug.

It's actually a very similiar situation just with different fields
http://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!

[Anonymous]

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

[Anonymous]

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!

[Anonymous]

I will take your exmaple Doug - if you are open....to sharing. Thanks!

[Anonymous · Accepted solution]

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>