如何顯示和隱藏表單？

Question

當我加載頁面時，我需要顯示名稱表單，但是當我單擊“提交”時，我需要隱藏該表單。 我怎么能用 javascript 做到這一點？

<div id="small-form">
    <form>
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname"><br>
        <input type="submit" value="Submit" onclick="hideForm()">
    </form>
</div>

Answer 1

在hideForm() function 中為 div small-form設置display:none樣式。

像那樣：

var myFormDiv = document.getElementById("small-form");
myFormDiv.style.display = "none";

Answer 2

如果表單提交到服務器，則不能只隱藏表單，除非您將表單 Ajax 發送到服務器或定位到 iframe 或新選項卡

當表單提交時，會加載一個新頁面。 如果它加載相同的頁面，您可以將其隱藏在服務器上或在 localStorage 中設置指令告訴頁面不顯示表單

我還強烈建議您不要使用提交按鈕的 onclick 而是使用提交事件

 document.getElementById("myForm").addEventListener("submit",function(e) { e.preventDefault(); // if you want to NOT submit the form document.getElementById("small-form").classList.add("hide"); // here you can ajax or do other stuff without submitting })

 .hide { display: none; }

 <div id="small-form"> <form id="myForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <input type="submit" value="Submit"> </form> </div>

Answer 3

如果您希望永久隱藏表單，您可以執行以下操作。 只需將表單的display屬性設置為none即可。 這將隱藏表單，但它將存在於 HTML 代碼中。

 function hideForm() { event.preventDefault(); var myForm = document.getElementById("My-Form"); myForm.style.display = "none"; var name = document.getElementById("Name"); alert(name.value); }

 <div id="small-form"> <form id="My-Form"> <label for="fname">First name:</label><br> <input id="Name" type="text" id="fname" name="fname"><br> <input type="submit" value="Submit" onclick="hideForm(event)"> </form> </div>

實現您想要做的另一種方法是簡單地刪除表單。 您可以通過在表單上調用remove() function 來完成此操作。 這將永久刪除表單。

 function hideForm(event) { event.preventDefault(); var myForm = document.getElementById("My-Form"); var name = document.getElementById("Name"); alert(name.value); myForm.remove(); }

 <div id="small-form"> <form id="My-Form"> <label for="fname">First name:</label><br> <input id="Name" type="text" id="fname" name="fname"><br> <input type="submit" value="Submit" onclick="hideForm(event)"> </form> </div>

Answer 4

您可以在 javascript 中的hideForm() function 中將display樣式設置為 none 以隱藏表單。

但是，因為您在表單上使用了提交按鈕，所以它會在按下提交按鈕時嘗試重定向。 一個簡單的解決方案（如果您不希望實際提交表單）是將輸入的類型更改為button而不是submit 。

 function hideForm() { document.getElementById('small-form').style.display = 'none'; }

 <div id="small-form"> <form > <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <input type="button" value="Submit" onclick="hideForm();"> </form> </div>