简体   繁体   English

提交表单后在同一页面上显示一条消息

[英]Showing a message in the same page after submitting a form

I have a simple HTML form with a name & email address field and a submit button. 我有一个简单的HTML表单,其中包含名称和电子邮件地址字段以及一个提交按钮。

After filling in the form and submitting it, I want a message such as "Thank you for your response" to appear on the same page. 填写并提交表格后,我希望在同一页面上显示一条消息,例如“谢谢您的答复”。

I'm looking for a easy clean PHP fix for this. 我正在为此寻找一个简单干净的PHP修复程序。 I want all the code to stay on one page (Not separate it into two different files). 我希望所有代码都停留在一页上(不要将其分成两个不同的文件)。

I've been searching on Google, but they have much more complex situations. 我一直在Google上进行搜索,但情况更为复杂。

Your help is greatly appreciated. 非常感谢您的帮助。 Thanks. 谢谢。

EDIT: I want the form to disappear after pressing submit and just show the "Thank you for your response" message. 编辑:我希望表单在按提交后消失,只是显示“谢谢您的回复”消息。 I forgot to mention that. 我忘了提。 Sorry. 抱歉。

<form>
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p style="padding-top: 15px"><span>&nbsp;</span><input class="submit"
type="submit" name="contact_submitted" value="submit" /></p>
</form>

please try below code. 请尝试以下代码。

<?php
if($_POST) {
    echo "Thank you for your response";
}
?>
<form name="test" action="" method="post">
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p style="padding-top: 15px"><span>&nbsp;</span><input class="submit"
type="submit" name="contact_submitted" value="submit" /></p>
</form>

Would something like the following help? 以下内容会有所帮助吗? Essentially, when you hit submit, some special variables are set in the $_POST array, and you can access those. 本质上,当您单击Submit时,会在$ _POST数组中设置一些特殊变量,您可以访问它们。 If those variables are set when we're building the page in PHP, then we can do some processing/send an email/show a different response page. 如果在用PHP构建页面时设置了这些变量,那么我们可以进行一些处理/发送电子邮件/显示其他响应页面。

<?php
  if (array_key_exists($_POST['your_email'])) /* and other validation */ {
?>
<p>Thanks!</p>
<?php } else { ?>
<form action="POST">
<p><span>Name</span><input class="contact" type="text" name="your_name" value="" /></p>
<p><span>Email Address</span><input class="contact" type="text"
name="your_email" value="" /></p>
<p style="padding-top: 15px"><span>&nbsp;</span><input class="submit"
type="submit" name="contact_submitted" value="submit" /></p>
</form>
<?php } ?>

in you form validate page 在您的表单验证页面中

header('location: ../page.php?case=Thank you for your response');

in your page 在您的页面中

<?php print $_GET['case']; ?>

<div>提交表格后不显示</div><div id="text_translate"><p>我正在尝试使用 FLask 并使用简单的 HTML 和 CSS 为前端构建一个 Webapp,因为我是新手。 现在我面临的问题是&lt;div class="blocking"&gt;在我提交表单后没有显示,但&lt;div class="spinner"&gt;工作正常。 下面是代码</p><pre class="lang-html prettyprint-override"> {% extends "layout.html" %} {% block content %} &lt;body&gt; &lt;form role="form" action="/reviewrequest/{{ value }}" method="POST" onSubmit="return validateForm():"&gt; &lt;table&gt;............. &lt;/table&gt; &lt;input type="submit" name="btn" value="Submit" class="btn btn-success success" /&gt; &lt;div id="blocking" class="blocking"&gt; &lt;div id="spinner" class"center loading"&gt;&lt;/div&gt;&lt;/div&gt; &lt;/form&gt; &lt;script&gt; function validateForm(){ document.getElementById("blocking").style.display = = 'block'; document.getElementById("spinner").style.display = = 'block'; } &lt;/script&gt; &lt;/body&gt; {% endblock %}</pre><p> 注意:相同的 CSS 代码适用于另一个 HTML 文件。</p><p> 编辑:添加了 '.style.display' 但仍然相同,只有微调器显示</p><pre class="lang-css prettyprint-override"> &lt;style type="text/css"&gt; #spinner { display: none; }.loading { border: 2px solid #ccc; width: 60px; height: 60px; border-radius: 50%; border-top-color: #1ecd97; border-left-color: #1ecd97; animation: spin 1s infinite ease-in; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #blocking { display: none; }.blocking{ width: 100%; height: 100%; background: rgba(0,0,0,0.75) no repeat center center; } &lt;/style&gt;</pre></div> - <div> not showing after submitting the form

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 提交表单后,其在不同页面上显示成功消息 - After submitting form its showing success message on different page 提交表单后如何在同一页面中获取成功消息? - How to get the success message in the same page after submitting the form? 在同一页面上提交表格和成功消息? - Submitting form and success message on same page? 提交后刷新表单页面上的感谢消息 - Refreshing the thankyou message on the form page after submitting 提交表单后在同一页面上进行统计 - statying on the same page after submitting the form 提交并显示页面的实际内容后隐藏表格 - Hiding form after submitting and showing actual content of page <div>提交表格后不显示</div><div id="text_translate"><p>我正在尝试使用 FLask 并使用简单的 HTML 和 CSS 为前端构建一个 Webapp,因为我是新手。 现在我面临的问题是&lt;div class="blocking"&gt;在我提交表单后没有显示,但&lt;div class="spinner"&gt;工作正常。 下面是代码</p><pre class="lang-html prettyprint-override"> {% extends "layout.html" %} {% block content %} &lt;body&gt; &lt;form role="form" action="/reviewrequest/{{ value }}" method="POST" onSubmit="return validateForm():"&gt; &lt;table&gt;............. &lt;/table&gt; &lt;input type="submit" name="btn" value="Submit" class="btn btn-success success" /&gt; &lt;div id="blocking" class="blocking"&gt; &lt;div id="spinner" class"center loading"&gt;&lt;/div&gt;&lt;/div&gt; &lt;/form&gt; &lt;script&gt; function validateForm(){ document.getElementById("blocking").style.display = = 'block'; document.getElementById("spinner").style.display = = 'block'; } &lt;/script&gt; &lt;/body&gt; {% endblock %}</pre><p> 注意:相同的 CSS 代码适用于另一个 HTML 文件。</p><p> 编辑:添加了 '.style.display' 但仍然相同,只有微调器显示</p><pre class="lang-css prettyprint-override"> &lt;style type="text/css"&gt; #spinner { display: none; }.loading { border: 2px solid #ccc; width: 60px; height: 60px; border-radius: 50%; border-top-color: #1ecd97; border-left-color: #1ecd97; animation: spin 1s infinite ease-in; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #blocking { display: none; }.blocking{ width: 100%; height: 100%; background: rgba(0,0,0,0.75) no repeat center center; } &lt;/style&gt;</pre></div> - <div> not showing after submitting the form 在同一页面上提交表单后弹出模态 - Modal pop up after submitting form on the same page 在 html 中提交表格后如何在同一页面上显示表格? - How to show the table on same page after submitting the form in html? jQuery验证显示消息但表单提交 - Jquery validation showing message but form submitting
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM