簡體   English   中英

提交表單后在同一頁面上顯示一條消息

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

我有一個簡單的HTML表單,其中包含名稱和電子郵件地址字段以及一個提交按鈕。

填寫並提交表格后,我希望在同一頁面上顯示一條消息,例如“謝謝您的答復”。

我正在為此尋找一個簡單干凈的PHP修復程序。 我希望所有代碼都停留在一頁上(不要將其分成兩個不同的文件)。

我一直在Google上進行搜索,但情況更為復雜。

非常感謝您的幫助。 謝謝。

編輯:我希望表單在按提交后消失,只是顯示“謝謝您的回復”消息。 我忘了提。 抱歉。

<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>

請嘗試以下代碼。

<?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>

以下內容會有所幫助嗎? 本質上,當您單擊Submit時,會在$ _POST數組中設置一些特殊變量,您可以訪問它們。 如果在用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 } ?>

在您的表單驗證頁面中

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

在您的頁面中

<?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.

相關問題 提交表單后,其在不同頁面上顯示成功消息 提交表單后如何在同一頁面中獲取成功消息? 在同一頁面上提交表格和成功消息? 提交后刷新表單頁面上的感謝消息 提交表單后在同一頁面上進行統計 提交並顯示頁面的實際內容后隱藏表格 <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> 在同一頁面上提交表單后彈出模態 在 html 中提交表格后如何在同一頁面上顯示表格? jQuery驗證顯示消息但表單提交
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM