js... conditional hide submit

[Charles_Sander1]

Doing a little research, I came across Sanford's suggestion for a .js & css solution to toggle a submit button, based on a select field.

It seems to be a pretty straightforward drop-in, but now I need to figure out what's preventing it from working for me. I just discovered one difference between his example and my form sitting on a Marketo Landing page, that might be causing some of the problem. In his example, the submit button's "mktoButtonRow" is sitting inside a "mktoFormCol" field. Mine is not inside the mktoFormCol, it seems. I'm wondering what the difference might be. Maybe there's a setting somewhere I need to change - or there's just something about the script I didn't understand and need to change.

For reference... his example: MktoForms2 :: Conditionally Show Submit - JSFiddle

And I went ahead and activated my test page for a moment to show what I'm trying: http://go.cyberscout.com/CyberScoutcom-Form_testingform.html

[SanfordWhiteman · Accepted solution]

Wow, that's quite an oldie! I wouldn't do that the same way now (I even just tightened up the Fiddle code a little bit) but I think the problem is that you don't have the Rich Text in place.

The way the code works is requires a RT area w/this inside:

<input name="__showSubmit" type="hidden">

Then a Visibility Rule on that RT determines whether the Submit button is shown or not.

Pretty sure I posted later-model code on the Community too.

[Charles_Sander1]

Hmmm... I've been searching, and the closest I could find was a tidbit about doing something similar based on a radio button select. I might be forced to figure out this oldie. I tried something new along this line, but I can be pretty dense and left-brain when it comes to javascript. variations of this just hide the button permanently... or the entire form. Here's where I got when I gave up and decided food was more important...

<script src="//app-ab14.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_xxxx"></form>

<script>// <![CDATA[

MktoForms2.loadForm("//app-aa00.marketo.com", "000-XXX-000", xxxx,

function(form)

{  

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

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

  var selectEl = formEl.querySelector('SELECT');

  var selectValue = !!(form.getValues()['#Reason_for_Inquiry__c'] == null );  

  buttonEl.style.display = 'none';

  selectEl.on('change', function() {

    if ( selectValue ){  

      buttonEl.style.display = 'none';  

    } else {  

      buttonEl.style.display = 'block';  

    } 

};

});

// ]]></script>

[SanfordWhiteman]

Can you show me the form setup (in Form Editor) and the full innards of your Rich Text area?

[Charles_Sander1]

I haven't added a Rich Text area to the form yet. I was trying a different way, after you alluded there might be a newer & better solution before going back to my initial attempt. (I wonder now if I might've misinterpreted) Here's what I have, though, if this is what you want.  (Apologies for some fields being cut off. It's the form's layout for where it actually sits when done.)

.

and...

[Charles_Sander1]

grrr... went back the original script, and added the rich text field. But no luck. In fact, when I try to view source, I somehow can't even see the richtext field, so I can troubleshoot.

http://go.cyberscout.com/CyberScoutcom-Form_testingform---RichText-field-to-hide-submit-btn.html

Screenshot to show that this form has the rich text field, and it's visibility condition is set.

[SanfordWhiteman]

But where's the Rich Text with the <input name="__showSubmit">?

[Charles_Sander1]

Ah, dang. I just figured it out. I didn't read well enough what you wrote a few posts above. Also It didn't seem to work if the Rich text field was set in Marketo's visibility rules, as well. I set the rich text field to always show, and it contains: <input name="__showSubmit" type="hidden" />

Now it works.

Thank you

[Charles_Sander1]

Dang.. I just got bit by the unexpected.

This all works fine on a Marketo landing page. When I went to drop it into a block on our Drupal corporate site, the form loads, it looks like the script is adding it's custom tags... but the submit button is no longer hidden. Is there something particular to the script that might act differently when embedded on a non-marketo page?

[SanfordWhiteman]

What's that URL? I'll take a look.