3 Replies Latest reply on Nov 15, 2013 7:15 AM by b80746847c28d476053c7a58732bebb962b00c75

    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? 
        • Re: Javascript for "other" field
          It will be something like this http://community.marketo.com/MarketoResource?id=kA650000000GtrKCAS
          • 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
            • 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