Hide Submit Until Dropbox Selected

Does this example help? https://formidableforms.com/knowledgebase/javascript-examples/#kb-conditionally-hide-submit-button 

I've seen that but wouldn't know how to change it to apply to a dropdown. I'm fine with CSS but JS still gets me all confused...

With the CSS to display:none; for the submit container, this is how I would write the script:


jQuery(document).ready(function($){
$("#field_g9t4k").on('change', function() {

if( $(this).val() == 'Apply for Senior Forecaster' ) {
$("#frm_form_11_container input[type=submit]").show();
} else {
$("#frm_form_11_container input[type=submit]").hide();
}
});
});


Thanks Victor. This looks good.

I have hidden the submit button with https://cl.ly/mfXI and applied your JS here https://cl.ly/mgps with and without script tags and it's not working. See a live example here: https://metcast.net/recruiting/

Not sure what's wrong as everything looks fine to me...

The value of the select is not 'Apply for Senior Forecaster'. It is 'Senior Forecaster [Application]'. This makes all the difference in the world when you are testing for a value. Change the jQuery to test for the correct value.

I also said to set the initial CSS to display:none, not visibility: hidden.

You've also got a lot of broken HTML on that page. There's so much broken HTML, I'm surprised the page is rendering correctly at all. This entire section of code is causing issues:

After that, you've got a few closing paragraph tags without corresponding opening tags.

Ok, I've made the changes but still no luck.

Javascript: https://cl.ly/mgOQ and CSS: https://cl.ly/mgqh

You mention broken HTML but didn't post the code you referred too. Would you mind trying again?

The forum is stripping out the code. I suggest you view your source code in Firefox. All the broken HTML will display in red. There's a lot of it.

Ok, I'll take a look. And what about the javascript/form?

You've got another mistake in your code. Let's see if you see the difference. In your CSS you are hiding: #frm_form_11_container button[type="submit"]

The CSS is working because you are applying it to the correct element. In the jQuery you originally posted, you are trying to display #frm_form_11_container input[type=submit]. Do you see the difference?

You have two different elements. A submit button is not the same as an input submit. This is why it's not working. Change the jQuery to show() / hide() the correct element (button).

Excellent! I cannot believe I didn't spot that.

It's very true that another pair of eyes makes the difference. I guess my inexperience and the fact that I've been struggling with this for a while got to me.

Thanks a lot Victor! Have a nice day.

Another quick question...

How would I add another option? Like this...

if( $(this).val() == 'Senior Forecaster [Application]' ) {
if( $(this).val() == 'Recruitment Question' ) {

You use a logical OR like this:

if( $(this).val() == 'Senior Forecaster [Application]' || $(this).val() == 'Recruitment Question' ) {

That doesn't seem to be working and I have no idea what a logical is...

Again, you don't have the right value for the "Recruitment Question ". You have a couple of spaces at the end of the value in the drop down field. This is not a match for "Recruitment Question", which is what you have in the code.

Ah, thanks for putting up with me... :D