SOLVED

Re: Hide the SUBMIT button based on Radio Button?

Go to solution
Matthew_Libanio
Level 2

Hide the SUBMIT button based on Radio Button?

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

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Hide the SUBMIT button based on Radio Button?

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

Re: Hide the SUBMIT button based on Radio Button?

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

SanfordWhiteman
Level 10 - Community Moderator

Re: Hide the SUBMIT button based on Radio Button?

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!

Matthew_Libanio
Level 2

Re: Hide the SUBMIT button based on Radio Button?

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!

Nicholas_Manojl
Level 9

Re: Hide the SUBMIT button based on Radio Button?

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

Re: Hide the SUBMIT button based on Radio Button?

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!