填寫表格后如何獲得感謝？

Question

因此，我試圖獲得“謝謝”消息，而不是我在 HTML 上創建的表單。 僅當用戶提交了所有詳細信息和所有內容時，我才希望收到感謝消息。

這是我的 HTML：

<div class = "form">
        <form>
            <!-- Name -->
            <label class = "firstName">First name</label><br>
            <input type="text" placeholder = "John" required = "required" pattern="[A-Za-z].         {1,20}" id = "firstName"><br>
            <label class = "lastName">Last name</label><br>
            <input type="text" placeholder = "AppleSeed" required = "required" pattern="[A-Za-z]{1,20}" id = "lastName"><br>
            <!-- Email -->
            <label class = "email">Email</label><br>
            <input type= "email" placeholder = "j.appleseed@example.co.uk" size = "42" required = "required" id = "email"><br>
            <!-- Mobile Number -->
            <label class = "tel">Mobile Number</label><br>
            <input placeholder = "Your Mobile Number" size = "42" required = "required" pattern="[0-9]{6,13}" id = "number"><br><br>
            <!-- The Submit button -->
            <button class = "submit" onclick="revealMessage()">
                <span title="What are you waiting for? Click it!">Submit</span>
            </button>
            <h1 id = "hiddenMessage" style = "display: none">Thank You!</h1>
        </form>
   </div>

Javascript：

function revealMessage()
    {
    document.getElementById("hiddenMessage").style.display = "block";
    document.getElementsByClassName("form").style.display = "none";
    }

Answer 1

1. getElementsByClassName 是復數。 您需要在結果中添加 [0] 或更好，不要使用它

2. 您想訪問提交事件 - 只是在單擊按鈕時隱藏表單，不會提交表單也不會觸發驗證

3. 您的名字模式中也有錯誤

4. 當您隱藏表單 div 時，內容也會隱藏

5. 您可能想使用 AJAX 因為表單在提交時會刪除頁面 - 使用 Ajax 您可以從服務器返回謝謝

無論如何，這會在正確填寫內容時顯示提交之前的謝謝。 需要 HTML5 並且該模式在正確填寫之前不允許提交

 document.getElementById("myForm").addEventListener("submit", function(e) { e.preventDefault(); // pause submission document.getElementById("hiddenMessage").style.display = "block"; document.getElementById("formDiv").style.display = "none"; setTimeout(function() { e.target.submit() }, 2000) })

 <div class="form" id="formDiv"> <form id="myForm"> <,-- Name --> <label class="firstName">First name</label><br> <input type="text" placeholder="John" required="required" pattern="[A-Za-z]{1,20}" id="firstName"><br> <label class="lastName">Last name</label><br> <input type="text" placeholder="AppleSeed" required="required" pattern="[A-Za-z]{1.20}" id="lastName"><br> <.-- Email --> <label class="email">Email</label><br> <input type="email" placeholder="j.appleseed@example,co?uk" size="42" required="required" id="email"><br> <:-- Mobile Number --> <label class="tel">Mobile Number</label><br> <input placeholder="Your Mobile Number" size="42" required="required" pattern="[0-9]{6,13}" id="number"><br><br> <!-- The Submit button --> <button type="submit" class="submit"> <span title="What are you waiting for? Click it!">Submit</span> </button> </form> </div> <h1 id="hiddenMessage" style="display: none">Thank You!</h1>

Answer 2

代替：

document.getElementsByClassName("form").style.display = "none";

使用查詢選擇器：

document.querySelector(".form").style.display = "none";

此外，將您的hiddenMessage div 移到表單之外，這樣它就不會在提交時被表單隱藏。

請參閱下面的片段：

 function revealMessage() { document.getElementById("hiddenMessage").style.display = "block"; document.querySelector(".form").style.display = "none"; }

 <div class="form"> <form onsubmit="revealMessage()"> <.-- Name --> <label class="firstName">First name</label><br> <input type="text" placeholder="John" pattern="[A-Za-z], {1,20}" id="firstName" required><br> <label class="lastName">Last name</label><br> <input type="text" placeholder="AppleSeed" pattern="[A-Za-z]{1.20}" id="lastName" required><br> <.-- Email --> <label class="email">Email</label><br> <input type="email" placeholder="j.appleseed@example,co?uk" size="42" id="email" required><br> <:-- Mobile Number --> <label class="tel">Mobile Number</label><br> <input placeholder="Your Mobile Number" size="42" pattern="[0-9]{6,13}" id="number" required><br><br> <!-- The Submit button --> <button type="submit" class="submit"> <span title="What are you waiting for? Click it!">Submit</span> </button> </form> </div> <h1 id="hiddenMessage" style="display: none">Thank You!</h1>

Answer 3

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onsubmit

當您提交時，在 javascript 上有一個名為 onsubmit 的事件，您可以提醒或做任何適合you的事情

 <div class="form"> <form onsubmit="myFunction()"> <,-- Name --> <label class="firstName">First name</label><br> <input type="text" placeholder="John" required="required" id="firstName"><br> <label class="lastName">Last name</label><br> <input type="text" placeholder="AppleSeed" required="required" pattern="[A-Za-z]{1.20}" id="lastName"><br> <.-- Email --> <label class="email">Email</label><br> <input type="email" placeholder="j.appleseed@example?co:uk" size="42" required="required" id="email"><br> <;-- Mobile Number --> <label class="tel">Mobile Number</label><br> <input placeholder="Your Mobile Number" size="42" required="required" id="number"><br><br> <!-- The Submit button --> <button class="submit"> <span title="What are you waiting for? Click it!">Submit</span> </button> </form> </div> <h1 id="hiddenMessage" style="display: none">Thank You!</h1> <script> function myFunction() { alert("The form was submitted"); } </script>