Javascript for "other" field

[Anonymous]

I'm trying to create logic where if someone chooses "other" in a select field, a text field will pop up below so they can input the value.  It looks like this used to be in the knowledge base, but the link is no longer valid.  Can anyone help with this? 

[Anonymous · Accepted solution]

It will be something like this http://community.marketo.com/MarketoResource?id=kA650000000GtrKCAS

[Anonymous]

Hi Cathal,

This worked perfectly when I did it using a test form on a test landing page.  However, when I pulled the custom HTML block into an existing landing page that has other elements on it (image, text), it is not working.  Please see the link below for what I'm referring to.  Is it a a layer order issue?  I tried reordering the layers and that didn't work.  Or does this custom HTML block need to go into the landing page template code itself to work?

http://pages.apspayroll.com/GuideACASummary_Registration.html

[Anonymous]

Hi Cathal, thanks for all of your help!  I figured out the issue, yay!  Here is what I ended up with, in case anyone else needs this:

Used your link for the walk-through: http://community.marketo.com/MarketoResource?id=kA650000000GtrKCAS

I edited the form template we use.  In my case, I needed the javascript to point to a Role field (Select field) and a Title field (Text field).

I added a custom HTML box to the landing page and set up the javascript so that when a person chooses "Other" from the select field, a text field titled Other will drop down so they can input their funcion/title.  The bold ares shown below is what I changed for what I needed:

<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("#Title").parents("li:first");
  var websiteField = $jQ("#Title");

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

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

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

});

</script>

Works like a charm!  I've included the link I used for testing purposes.  Hope this helps someone out there!


http://pages.apspayroll.com/GuideACASummary_Registration.html