表单提交后显示 div答案

【问题标题】：reveal div after form submit表单提交后显示 div
【发布时间】：2013-07-28 20:22:32
【问题描述】：

在我的 Wordpress 网站上，我有一个输入字段，用户在其中输入他们的电子邮件地址，然后单击“提交”以将他们的电子邮件提交到我的谷歌电子表格（使用谷歌驱动器上的谷歌表单）。

我还有一个按钮，当单击该按钮时会打开一个弹出窗口（我正在使用 Wordpress 的 SimpModal 插件）。

有没有办法整合这两个功能，这样我就只有一个按钮来完成这两个结果？（即当用户填写了他们的电子邮件地址然后点击提交按钮时，它会将他们的电子邮件地址提交到谷歌表单，并打开弹出窗口？）

这是我的代码：

<!--This gets rid of the google confirmation page-->
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none; width:0px; height:0px;" onload="if(submitted){window.location='#';}"></iframe>

<form action="https://docs.google.com/forms/d/XXXXX/formResponse" method="POST" id="ss-form" onsubmit="" target="hidden_iframe">


<input type="text" name="entry.2005577686" value="" id="entry_2005577686">
<input type="submit" name="submit" value="Submit" >

<div id="button-to-open-popup"><a href="#">
<img src="/landing-pg-button-black.png" alt="" /></a>
</div>

</form>

提前致谢！！！

【问题讨论】：

标签： forms function submit

【解决方案1】：

真的很简单！如果您没有 jQuery，请将其导入代码中的某个位置：

<script src="http://code.jquery.com/jquery-latest.js"></script>

然后在form标签中更改onsubmit...

<form ... onsubmit="$('#button-to-open-popup').click();return true;" ...>

多田！

【讨论】：

只是为了让我更好地理解它是如何工作的——“return true”是什么意思？
Nothing :P 不，但是如果你返回 false，表单将不会提交，你通常使用 onsubmit 来确保表单被填写，然后根据 if 返回 false/true表格是否完整，所以只是为了更清楚。但实际上，没有它可能会更清楚.. return true 是默认值，所以不需要那个.. :)
所以，我们在这里添加的关键代码是 "onsubmit="$('#button-to-open-popup').click();" 基本上意味着：“当表单是提交，如果点击#button-to-open-popup，你会做什么？
哦不！它只是说：“提交表单时，单击 id 为 'button-to-open-popup' 的元素” :)
但是，关键代码是“onsubmit="$('#button-to-open-popup').click();”。