Php 在表单提交上显示div，无重定向

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

我用javascript做过类似的尝试--

函数showHide（）{
var div=document.getElementById（“隐藏的_div”）；
如果（div.style.display=='none'）{
div.style.display=''；
}
否则{
div.style.display='none'；
}
} 

这非常适合在提交时显示隐藏的div，但是实际的表单不起作用：(

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

---

我将演示如何使用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> 

它的作用是：

序列化表单数据，即将其转换为一个长字符串，如
wp-email-capture-name=&wp-email-capture-email=&wp\u-capture\u-action=1
，该字符串存储在
serial
中
将序列化数据提交到表单的操作url（
form.action
）
如果表单提交成功，它将运行
success
处理程序，这是
$.post（）
的第三个参数。此处理程序负责显示隐藏的div。我将代码更改为使用jQuery的
.show（）
函数，该函数负责处理浏览器不一致性
希望这会有所帮助。
我将演示如何使用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> 

它的作用是：

序列化表单数据，即将其转换为一个长字符串，如
wp-email-capture-name=&wp-email-capture-email=&wp\u-capture\u-action=1
，该字符串存储在
serial
中
将序列化数据提交到表单的操作url（
form.action
）
如果表单提交成功，它将运行
success
处理程序，这是
$.post（）
的第三个参数。此处理程序负责显示隐藏的div。我将代码更改为使用jQuery的
.show（）
函数，该函数负责处理浏览器不一致性
希望这会有帮助。
返回false；
会阻止表单提交。但是，如果没有它，您的页面将发回，并且看起来好像您的隐藏div从未显示过一样。是否确实要提交表单进行服务器端处理并显示隐藏div，而不重新加载页面？如果是，您需要查看AJAX。是的，我很抱歉我希望表单能够被处理并显示隐藏的div，而不需要页面重定向。除了碟子之外，我从来没有接触过AJAX：（它是如何工作的？谢谢。正如Cory所解释的，你肯定需要AJAX。AJAX是一种以编程方式发送数据的方法（使用javascript）无需重新加载页面。您可以使用哪种类型的Javascript库/框架（如果有的话）？例如，您的站点是否使用jQuery、Prototype、Mootools等？如果您不知道，请尝试查看其中一个页面的
部分，看看您有什么类型的
。如果我们知道您正在使用什么，我们可以提供帮助进一步介绍针对特定设置的正确AJAX实现。如果表单操作是其他页面，则var$url包含的值是什么？控件将转到该页面，并且该页面上的代码将不会执行。@ampersand.Hi.谢谢。有jquery。主题的作者链接了一个jquery文件。
return false；
阻止该表单从提交。但是，如果没有它，您的页面将发回，它将显示为您的隐藏div从未显示。您是否确实要提交表单进行服务器端处理并显示隐藏div，而不重新加载页面？如果是这样，您需要查看AJAX。是的，我希望处理表单并显示隐藏div而不重新加载页面直接。除了盘子之外，我从来没有接触过AJAX：（它是如何工作的？谢谢。正如Cory解释的，你肯定需要AJAX。AJAX是一种以编程方式发送数据的方法（使用javascript）无需重新加载页面。您可以使用哪种类型的Javascript库/框架（如果有的话）？例如，您的站点是否使用jQuery、Prototype、Mootools等？如果您不知道，请尝试查看其中一个页面的
部分，看看您有什么类型的
。如果我们知道您正在使用什么，我们可以提供帮助进一步介绍针对特定设置的正确AJAX实现。如果表单操作是另一个页面，那么var$url包含的值是多少？控件将转到该页面，并且该页面上的代码将不会执行。@ampersand.Hi.谢谢。有jquery。主题的作者链接了一个jquery文件。对不起，ampersand！我以为该线程已被删除广告，我的头上有很多东西把这个问题放到backburner上。非常感谢。我会尽快测试这段代码。我真的不得不启动这个网站，只是暂时使用javascript历史记录-1解决方案重定向回访问者所在的页面。我一定会尽快尝试，非常感谢您的时间。对不起，ampersand！我我认为这个线程已经死了，我的脑袋上有很多东西，所以把这个问题放到backburner上。非常感谢。我会尽快测试这段代码。我真的不得不启动这个网站，只是暂时使用javascript历史记录-1解决方案重定向回访问者所在的页面。我一定会很快尝试，非常感谢你r时间。
<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> 

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