一页上有3种重力形式

Question

I'm currently displaying three gravity forms on a page, "display:none;", and setting them to "block" when one of the three corresponding buttons are clicked.

You can view the example on http://b2bsauce.com/

The problem is that on validation, the AJAX part reloads, with the error messages and again displays the form as hidden, which obviously, in this case, does not make sense.

Is there any way I can hook into the validation process and set the form to display or should I have gone about this in another way?

JS

var form = jQuery(this).attr('href');
jQuery('.gform_wrapper').not(form).css('display','none');
jQuery(form).slideDown();

HTML

Each form is contained in this wrapper, which is set to "display:none".

<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_1" style="display: block;">
</div>

<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_2" style="display: block;">
</div>

<div class="gf_browser_chrome gform_wrapper" id="gform_wrapper_3" style="display: block;">
</div>

Answer 1

Submit buttons don't have the href attribute (assuming that's what is being clicked), are you trying to get the action of the form or just save the form instance itself to a variable?

I think you are trying to save the form element to a variable so I would change your code to:

var $form = jQuery(this).parents('form'); // use $ prefix to show it's a jQuery object
jQuery('.gform_wrapper').not($form).css('display','none');
jQuery($form).slideDown(); // not sure if you need this line if the form is already showing

but I'm not sure if that's all you need or not without some sort of self contained example that can be edited.

Answer 2

Gravity forms can be a bit tricky at time and I eventually found the error.

I used a "click" eventListener on the ".button" class to switch between hidden/block of the forms. However, the submit button in Gravity Forms also has a button class attached, hence it was hiding the form every time the submit button was clicked.

I thus made sure that the click listener is only attached to the three buttons at the top.