Hide the SUBMIT button conditionally « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Craiger
Member

Hey Kevin, finally working on the contact form as we discussed at WCBoston.

Have to say again, LOVE THIS PLUGIN!

How would I hide the submit button based on a conditional logic field?

Thanks,
--Craig

Posted 14 years ago on Thursday February 11, 2010 | Permalink
Kevin Flahaut
Administrator

Hey Craig, I had worked out a decent solution and was trying to improve on it. Let me find it and I'll post it for you.

Posted 14 years ago on Thursday February 11, 2010 | Permalink
Craiger
Member

Awesome. Thanks.

Posted 14 years ago on Friday February 12, 2010 | Permalink
RichardBest
Member

Would be great if you could post the solution here please Kevin, as this is v interesting. Cheers. R.

Posted 14 years ago on Friday February 12, 2010 | Permalink
Kevin Flahaut
Administrator

Having trouble finding my original script, may have to rewrite it and post this tomorrow. Sorry to keep you waiting.

Posted 14 years ago on Friday February 12, 2010 | Permalink
Craiger
Member

LOL, no problem. Have the form built, so just need that snippet to finalize.

I do have a couple of suggestions for enhancements, as this little project REALLY showed me the power of this AWESOME plugin.

I think I will be writing a post about it as soon as we launch the new form.

Check it out: http://www.studiopress.com/contact-test

A few of those options are where I want to use the "hide submit" button.

Posted 14 years ago on Friday February 12, 2010 | Permalink

Craig, Here's a nice little jQuery snippet to get you there. It basically checks for the value of the select, and hides the button for those you specify.

You can insert this in your header.php file, or you you may want to create a new page template specifically for this form and include it in there.

<script type="text/javascript">

jQuery(document).ready(function(){
	jQuery("#input_4_5").click(function(){ToggleButton();});
	ToggleButton();
});

function ToggleButton(){
	var display = "block";
	if(jQuery("#input_4_5").val() == "Select One...")
		display = "none";
	else if(jQuery("#input_4_5").val() == "Support Question")
		display = "none";
	else if(jQuery("#input_4_5").val() == "Member discount code")
		display = "none";
	else if(jQuery("#input_4_5").val() == "Unable to view Support forum or Tutorials")
		display = "none";
	else if(jQuery("#input_4_5").val() == "Need a Theme - another copy, newly-released, latest version ")
		display = "none";
	else if(jQuery("#input_4_5").val() == "Unable to access Forum account")
		display = "none";
	else if(jQuery("#input_4_5").val() == "Theme Customization")
		display = "none";
	else if(jQuery("#input_4_5").val() == "Refund ")
		display = "none";		

	jQuery(".button").css("display", display);
}
</script>

You will need to make sure the "#input_4_5" is the actual id of you select field. Also, pay close attention when inputting the value of the fields. In your example, some had blank trailing spaces that you have to either delete, or make sure they're included in the script.

You can see my working test (with your form) here.

Posted 14 years ago on Friday February 12, 2010 | Permalink

Craiger
Member

For the benefit of others, here is the final javascript snippet that I used and placed in a page template that was used for the contact page.

Note: Updated script on 02.16.2010

<script type="text/javascript">

jQuery(document).ready(function(){
       jQuery("#input_4_5").click(function(){ToggleButton();});
       ToggleButton();
});

jQuery(document).ready(function(){
       jQuery("#input_4_28").click(function(){ToggleButton();});
       ToggleButton();
});

function ToggleButton(){
       var display = "block";
       if(jQuery("#input_4_5").val() == "Select One...")
               display = "none";
       else if(jQuery("#input_4_5").val() == "Member discount code")
               display = "none";
       else if(jQuery("#input_4_5").val() == "Support Question")
               display = "none";
       else if(jQuery("#input_4_5").val() == "Unable to view Support forum or Tutorials")
               display = "none";
       else if(jQuery("#input_4_5").val() == "Need a Theme: another copy, newly-released, latest version")
               display = "none";
       else if((jQuery("#input_4_5").val() == "Unable to access Forum account") && (jQuery("#input_4_28 input:radio:checked").val() == "No"))
               display = "none";
       else if(jQuery("#input_4_5").val() == "Theme Customization")
               display = "none";
       else if(jQuery("#input_4_5").val() == "Refund")
               display = "none";

       jQuery(".button").css("display", display);
}

</script>

Note the "AND" statement on line 31 thru 34

Posted 14 years ago on Friday February 12, 2010 | Permalink

This topic has been resolved and has been closed to new replies.