Question

我正在使用WordPress侧边栏小部件来捕获电子邮件地址。问题是，它在表单提交后重定向。我希望访问者在表单提交后留在他们所在的页面上，只有一个隐藏的div给出成功的注册消息。

我尝试过像这样的javascript -

<script type="text/javascript">
function showHide() {    
var div = document.getElementById("hidden_div");
if (div.style.display == 'none') {
div.style.display = '';
}
else {      
div.style.display = 'none';
}
} 
</script>

这完全适用于在提交时显示隐藏的div，但实际的形式不起作用：（

表格（我试图做的）是这样的 -

<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>

<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p> 
</div>

问题出现在'return false'和表单操作之间（这是插件编码器使其重定向的地方）。如果我删除'return false'，它会重定向。在那里'return false'，表单不起作用。我无法找到一种方法来使表单工作但不重定向，即。只是展示隐藏的div，工作，就是这样！没有重定向:)非常感谢您的帮助。

Answer 1

我将展示如何使用jQuery提交表单，因为这是您可以使用的内容：

首先，您应该对表单HTML进行一次小的更改。即，将showHide()更改为showHide(this)，这将使showHide()访问表单元素。 HTML应该是：

<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(this); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>

<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p> 
</div>

提交表单并在成功提交时显示div的javascript是：

function showHide(form) { 
    var serial = $(form).serialize();
    $.post(form.action, serial, function(){
        $('#hidden_div').show();
    });
};

这是做什么的：

序列化表单数据，即将其转换为一个长字符串，例如存储在wp-email-capture-name=&wp-email-capture-email=&wp_capture_action=1中的serial。
将序列化数据提交到表单的操作网址（form.action）
如果表单提交成功，它将运行success处理程序，这是$.post()的第三个参数。这个处理程序负责显示隐藏的div。我更改了代码以使用jQuery的.show()函数，它可以解决浏览器的不一致问题。

希望这有用。

在表单提交时显示div而没有重定向

1 个答案: