SOLVED

Javascript for "other" field

Go to solution
Anonymous
Not applicable

Javascript for "other" field

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? 
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Anonymous
Not applicable

Re: Javascript for "other" field

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

View solution in original post

3 REPLIES 3
Anonymous
Not applicable

Re: Javascript for "other" field

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

Re: Javascript for "other" field

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
Not applicable

Re: Javascript for "other" field

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