SOLVED

Hide the SUBMIT button based on Radio Button?

Go to solution
Matthew_Libanio
Level 2

I am trying to find a way to hide this SUBMIT button but have not found anything applicable in the case of this form located here:

Become A Customer

If I select option 3 "I need additional access...", then I would like the SUBMIT button to vanish.

Now I have asked this question before and the solution worked, but I cannot find it since the Marketo Community forum move.  In fact, quite a few of my posts have vanished as well!  Oh well.

I remember it was a simple solution.  Since this page went corrupt, and I had to quickly rebuild, I lost the code, in the meantime, I put a silly solution in place that just add's tons of spaces to shoot the submit button down below visibility.  LOL!

Your help is definitely appreciated.

1 ACCEPTED SOLUTION
SanfordWhiteman
Level 10 - Community Moderator

Yep...

MktoForms2.whenRendered(function(form){

  var formEl = form.getFormElem()[0],

      buttonEl = formEl.querySelector('.mktoButtonRow');

  var addlAccess = !!(form.getValues()['Lead_Source_Type__c'] == "I need addtional access to my account");

  if ( addlAccess ){

    buttonEl.style.display = 'none';

  } else {

    buttonEl.style.display = 'block';

  }

});

Note this is very quick and dirty. A more pro solution would use CSS classes and a microframework to manage this special kind of visibility rule.  Also note the typo on the form!

View solution in original post

5 REPLIES 5
Josh_Hill13
Level 10 - Champion Alumni

Do you have a developer? Maybe Sanford Whiteman​ can help.

SanfordWhiteman
Level 10 - Community Moderator

Yep...

MktoForms2.whenRendered(function(form){

  var formEl = form.getFormElem()[0],

      buttonEl = formEl.querySelector('.mktoButtonRow');

  var addlAccess = !!(form.getValues()['Lead_Source_Type__c'] == "I need addtional access to my account");

  if ( addlAccess ){

    buttonEl.style.display = 'none';

  } else {

    buttonEl.style.display = 'block';

  }

});

Note this is very quick and dirty. A more pro solution would use CSS classes and a microframework to manage this special kind of visibility rule.  Also note the typo on the form!

Nicholas_Manojl
Level 9

hey Sanford Whiteman

Thanks for this.

How would you solve this problem for multiple values?

I managed to do it by creating a switch:

switch(form.getValues()['annualturnover']) {

      case 0:

          var addlAccess = "false";

          break;

      case 1:

          var addlAccess = "false";

          break;

      case 2:

          var addlAccess = "false";

          break;

      case 3':

          var addlAccess = "false";

          break;

                                           }

          if ( addlAccess ){  

    buttonEl.style.display = 'none';  

  } else {  

    buttonEl.style.display = 'block';  

  } 

But I wonder how you'd do that? Is there a shorthand way of doing OR statements after the == in your row 5? "I need additional" || "Another value" didn't seem to work.

SanfordWhiteman
Level 10 - Community Moderator

var addlAccess = [0,1,2,3].indexOf(form.getValues()['annualturnover']) != -1;

or

var addlAccess = /^[0123]$/.test(form.getValues()['annualturnover']);

or

var addlAccess = [0,1,2,3].some(function(itm){return itm === form.getValues()['annualturnover'];});

Lots of ways to skin such cats!

Matthew_Libanio
Level 2

Thanks Josh and Sanford.  I will review this and report back, but I don't see why this shouldn't work!  Looks similar to what I used to have.  Just kept it simple was sufficient for the purposes of this form.

But wow, the typo is crazy. We use software to track typo's on our site, and I am stunned it did not catch that.  We should cancel our subscription and hire you! Hahaha!

Thanks again!