一页上的 3 种重力形式

Question

我目前在页面上显示三种重力形式，"display:none;"，并在单击三个相应按钮之一时将它们设置为 "block"。

上查看示例

问题在于，在验证时，AJAX 部分会重新加载，并显示错误消息并再次将表单显示为隐藏，显然，在这种情况下，这没有意义。

有什么方法可以连接到验证过程并设置要显示的表单，或者我应该以其他方式处理此问题吗？

JS

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

HTML

每个表单都包含在这个包装器中，它被设置为 "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

提交按钮没有 href 属性（假设这是被点击的内容），您是要获取 form 的 action 还是只是保存 form 将自身实例化为一个变量？

我认为您正试图将 form 元素保存到一个变量中，因此我会将您的代码更改为：

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

但如果没有某种可以编辑的自包含示例，我不确定这是否就是您所需要的全部。

Answer 2

重力形式有时会有点棘手，我最终找到了错误。

我在“.button”class 上使用了 "click" eventListener 来在 hidden/block 表单之间切换。但是，Gravity Forms 中的提交按钮也附加了一个按钮 class，因此每次单击提交按钮时它都会隐藏表单。

因此我确保点击侦听器仅附加到顶部的三个按钮。

一页上的 3 种重力形式

3 Gravity Forms on one page

javascript

ajax

wordpress

jquery

gravity-forms-plugin