Hide the SUBMIT button based on Radio Button?

[Matthew_Libanio]

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.

[Josh_Hill13]

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

[SanfordWhiteman · Accepted solution]

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]

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]

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]

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!