提交表格后會怎樣？

Question

這可能是一個廣泛的答案，但我會盡量縮短。 我想做的是使用表單從用戶那里獲取一些信息，並使用JavaScript“驗證表單”。 如果驗證成功，則提交表單。 一旦發生這種情況，我試圖檢索使用Java腳本輸入到表單的數據並顯示在同一頁面上。（使用模式）

盡管我認為這背后的邏輯是錯誤的。 表單驗證后即可提交嗎？ 一旦提交頁面刷新？ 因此輸入數據丟失了嗎？ 這可能是為什么我在模態中不斷獲取空的空值的原因嗎？

繼承人的形式的HTML

<div class="feedback-background">
<div class="feedback-content">
    <div class="close">+</div>
    <img src="../Images/Images2/feedbackimg1.jpg" alt="Givefeedback" style="width:100px;height:100px;">

    <form name="FeedbackForm" action="/action_page.php" onsubmit="return validateForm();displayContent();"
          method="get">
        Name:
        <input id="Name" name="Name" type="text" placeholder="Name">
        E-Mail:
        <input id="E-mail" name="E-mail" type="email" placeholder="E-mail">
        What do you think about us?<br>
        <textarea id="comment" rows="6" cols="33" name="comment"></textarea>
        <br>
        How would you rate us ?
        <br>

        <label><input type="radio" name="rating" id="rating1" value="Excellent" checked>Excellent</label>
        <label><input type="radio" name="rating" id="rating2" value="Very Good">Very Good</label>
        <label><input type="radio" name="rating" id="rating3" value="Average">Average</label>
        <label><input type="radio" name="rating" id="rating4" value="Poor">Poor</label>
        <label><input type="radio" name="rating" id="rating5" value="Extreamly Poor">Extremely Poor</label>
        <input type="submit" id="submit" value="Submit">
    </form>
</div>

這是模式的HTML，其中輸入數據將再次顯示給客戶

<div class="popup">
    <div class="popuptext" id="myPopup"><p>Thank you <span id="username"></span> ,<br>Your feedback has been
        recorded.<br>
        <br>You commented that"<span id="usercomment"></span>" <br><br>and rated our website "<span
                id="userrating"></span>".
        <br><br>Thank you
        for taking your time to do so.<br><br>You will now be re-directed automatically</p>
    </div>
</div>

這是我用於表格的css

/*----------comment form----------*/

.feedback-background{
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.7);
 position: absolute;
 top: 0px;
 display: flex;
 align-items: center;
 justify-content: center;
 display:none;
 }
 .feedback-content{
  width: 500px;
  height: 550px;
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  position:relative;


  }
 #submit{text-transform:uppercase;
 padding:6px 2px;
 margin-right: 40px;
 margin-top: 20px;

 background: #ee0c6e;
 font-weight:600;
 color:white;
 border-radius: 3px; 
 font-size: 10px;
 min-width: 100px;
 text-decoration:none
 }

 input {
 width: 50%;
 display: block;
 margin: 10px 0px;

   }

   label {
   display: block;
  }

 input[type="radio"]{
 width: auto;
 display: inline;
  }
 input[type="submit"]{
 width:10em;height: 2em;
 cursor:pointer;

 }
.close{
position:absolute;
top:0px;
right:14px;
transform:rotate(45deg);
font-size:42px;
cursor:pointer;
 }
#feedbacksubmit{
margin-left:600px;
margin-bottom:50px;
background-color:#484848;
border-radius:14px;
padding:10px;
cursor:pointer;
color:white;
outline:none;
}

這是我用於彈出模式的CSS

/*-----popup----*/
.popup{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0px;
display: flex;
align-items: center;
justify-content: center;
display:none;

 }
.popuptext{
  width: 100px;
 height: 350px;
 background-color: #000025;
 border-radius: 4px;
 padding: 20px;
 position:relative;
 color:#fff;
 width: 20%;
 height:30%;
 display: block;
 margin: 10px 0px;
 text-align:center;
 margin-left:0px;
 margin-bottom:80px;
 }

 #logo{

margin-right:100px;
float:left;
}

這是我使用過的JavaScript。

/*------comments form-----*/

document.getElementById('feedbacksubmit').addEventListener('click',
    function () {
        document.querySelector('.feedback-background').style.display = 'flex';
    }
)


document.querySelector('.close').addEventListener('click',
    function () {
        document.querySelector('.feedback-background').style.display = 'none';
    }
)


function displayContent() {
    var name = document.getElementById("Name").value;
    var comment = document.getElementById("comment").value;

    var ratings = document.getElementById('rating');
    var rate_value;
    for (var i = 0; i < rating.length; i++) {
        if (rating[i].checked) {
            rate_value = rating[i].value;
        }
    }

    /*these lines are used to write the details into the new modal*/
    document.getElementById("username").textContent = name;
    document.getElementById("usercomment").textContent = comment;
    document.getElementById("userrating").innerHTML = rate_value;

    return "";
}


function closePopup() {

    document.querySelector('.popup').style.display = 'none';
}

/*-------validation-----*/
function validateForm() {
    var x = document.forms["FeedbackForm"]["Name"].value;
    if (x == "") {
        alert("Name must be filled out");
        return false;
    }
    var z = document.forms["FeedbackForm"]["E-mail"].value;
    if (z == "") {
        alert("Please enter your E-mail address to proceed");
        return false;
    }
    var y = document.forms["FeedbackForm"]["comment"].value;
    if (y == "") {
        alert("Comment section can not be empty");
        return false;
    }

    var a = 0, rdbtn = document.getElementsByName("rating")
    for (i = 0; i < rdbtn.length; i++) {
        if (rdbtn.item(i).checked == false) {
            a++;
        }
    }
    if (a == rdbtn.length) {
        alert("Please select a rating according to you");
        return false;
    }


    document.getElementById('submit').addEventListener('click',
        function () {
            document.querySelector('.feedback-background').style.display = 'none';
            document.querySelector('.popup').style.display = 'flex';
        }
    )
}

有沒有更好的辦法 ？ 我該怎么做呢？ 我做錯了什么

Answer 1

不必過於仔細地查看您的代碼，這里是所要求的“大圖”概述，概述了提交表單時發生的事情以及如何驗證表單。

首先，表格以及提交時的處理方式。

當您單擊提交按鈕時，您的表單數據將被發送到在表單標簽上指定的文件-在您的情況下為“ /action_page.php”。 到達的地方有許多變量（又名“鍵-值對”-但它們是具有名稱和值的變量）。 注意，“變量名稱”是在（例如）輸入字段的name=屬性中指定的內容，而“變量內容”是在（例如）輸入字段中鍵入的內容。

您的后端PHP文件將需要使用$ _POST或$ _GET命令為這些項目中的每一個創建正確的PHP $變量，具體取決於您在form標記的“ method =”屬性中使用的方法。 例如，您的表單具有一個名為name=comment的textarea元素。 在PHP方面，您可以編寫：

$cmt = $_GET['comment'];

和presto！ 您在PHP變量$ cmt中具有用戶的注釋。

您可以在此階段進行驗證，也可以在甚至提交文件之前驗證javascript中的代碼（請注意，javascript可以攔截表單提交過程並停止它，或者繼續進行。

然后，您的PHP文件可以將用戶發送回同一頁面（在這種情況下，您需要在頂部使用<? php>部分進行處理），也可以將其完全轉到另一個頁面。

重要筆記：

1. 重要提示：從PHP文件的指定的action=位置，您可能會遇到一些麻煩，因為您以斜杠開頭。 這會將操作系統發回到文件系統的根目錄以查找您的文件，而這可能不是您想要的。 現在，將"action_page.php"文件放置在與index.php文件相同的位置，並放置斜杠。

2. 開始時，請勿使用相同的PHP文件來接收用於向用戶顯示表單的表單。 AJAX也一樣（到此為止）。 首先做一些事情，以便您輕松理解該過程，然后使其變得涼爽。

3. 您可以在提交前在JS中驗證用戶數據，或者在提交后在PHP中驗證用戶數據。 但是，可以在DevTools（F12）控制台中讀取，調試甚至更改javascript-因此，除了諸如“字段是否為空”之類的超基本內容外，不要在javascript中進行重要的驗證。

4. 永遠不要信任用戶數據。 有些用戶是黑客，如果您不清理他們輸入的數據，他們可以擁有您。 研究消毒用戶數據 ， 這也將幫助您開始了解部分。

AJAX

提交表單時，屏幕將刷新。 那么，那些您在其中填寫表格，提交並沒有任何刷新的網站會發生什么，但是更改會在現有頁面上更新。 這是通過AJAX完成的。

AJAX實際上非常簡單-幾乎比表單更簡單。 開始使用AJAX的基本原則與我上面的注釋相同：具有與用戶當前使用的后端PHP文件不同的后端PHP文件。

坦白說，這些天來，我們不再使用表格了。 幾乎我們過去使用AJAX處理表單時所做的所有事情-而且操作簡單！

那么AJAX如何工作？ 本質上，javascript將表單數據（請參見以下示例！）發送到指定的PHP文件，該文件處理數據並echo響應。 您收到該響應，將其分解為變量，然后相應地更改頁面。 有關更多信息，請參見下面的參考。

注意：如果您花十分鍾時間嘗試以下參考文章中的示例，則可以節省數小時的頭部抓撓時間。 只需在您自己的服務器上重現示例並進行一些操作即可。

參考資料：

表單如何運作

HTML表單與Ajax

AJAX的簡單概述

使用ajax的簡單登錄系統

Answer 2

您需要使用event.preventDefault()來阻止正在提交的表單的默認操作。

更改

document.getElementById('submit').addEventListener('click',
 function(e){
 document.querySelector('.feedback-background').style.display='none';
 document.querySelector('.popup').style.display='flex';
}

至

document.getElementById('submit').addEventListener('click',
function(e){
 document.querySelector('.feedback-background').style.display='none';
 document.querySelector('.popup').style.display='flex';
 e.preventDefault();
 }

但是，阻止提交表單將阻止表單中的數據發送到服務器進行處理並保存在數據庫中。 為了能夠處理發送到服務器的數據，您將需要使用某種服務器端編程語言，並且需要設置表單的action屬性。 Javascript不足以完成此任務。

Answer 3

首先，您想使用JavaScipt驗證表單中的數據。 這很簡單，您可以運行所有檢查並進行驗證，但是接下來出現的問題是您希望站點執行什么操作。 您希望數據反映在頁面上，但尚未向我們提及您網站的目標。 看看我是否有一些簡單的東西，想要在表單上運行檢查並在網站上的其他地方輸出，它很簡單：

相同頁面驗證

• 從表單獲取數據
• 在表單提交代碼中，使用函數或if語句對輸入進行驗證檢查。 （每個Google均提供最佳做法）。
• 如果驗證失敗，該怎么辦？ 您必須通過在html上附加通知以向用戶顯示發生了驗證錯誤的方式來處理該問題。
• 表單完成驗證后，您必須e.preventDefault（），這將阻止網站加載。
• 如果驗證有效，則獲取表單輸入的值並將其附加到html元素，以便可以輸出它們。

好的，但是正如您所看到的，即使沒有表單進行提交過程，您仍然可以通過100種方法來執行此操作。 為什么不只是在運行相同驗證並返回數據的onClick上運行一個函數，然后可以將其附加到html。

但是要注意的是，刪除數據的原因是因為表單正在嘗試對數據進行處理，並且頁面刷新時沒有任何反應，因此一切都丟失了。 正確的方法是嘗試構建應用程序，如下所示：

普通表格提交

• 輸入用戶輸入后，單擊提交按鈕。 運行驗證，如果有任何錯誤阻止表單提交，但沒有錯誤繼續
• 對您說的php文件運行后端驗證。 運行與JS中相同的驗證，但使用PHP或首選的后端語言。 如果有任何錯誤，則需要研究在向用戶提交表單時顯示php錯誤。
• 如果一切正常，則可以將用戶信息存儲在數據庫中，然后查詢特定用戶。
• 如果您想要同一頁面，則沒有重新加載信息，表明您需要使用php研究ajax。 這是一個很好的做法，一旦您開始工作，它就會非常酷。
• 為了顯示用戶信息，從后端獲取數據時還必須考慮。 如果要顯示剛輸入的用戶，則可以獲取列表的最后一個用戶。

有很多方法可以解決這個問題，並將所有代碼投入工作將花費更多的時間，但是我希望我對您的想法有所了解。

Answer 4

如果要在提交之前驗證數據，則需要偵聽表單的submit事件。 在偵聽器內部，您可以從輸入中檢索數據，對其進行驗證，並在必要時設置適當的警告等。 如果驗證失敗，則可以阻止提交從偵聽器返回的false 。