單擊提交后如何以html形式保留輸入的數據

Question

我在html頁面中有一個表單，單擊提交按鈕后，該表單最終被清除。 我想知道如何在單擊“提交”后使數據保留在表單中，以防用戶需要修復任何錯誤。 任何幫助，將不勝感激！

這是html代碼：

<form id = "contactform" action = "">
<label> Name:
<input name = "firstname" type = "text" id = "firstname" maxlength = "50"/>
</label>
<label> Last Name:
<input name = "lastname" type = "text" id = "lastname" maxlength = "150" />
</label>
<label> Address: 
<input name = "address" type = "text" id = "address" maxlength = "200"/>
</label>
<label> Postcode: 
<input name = "postcode" type = "text" id = "postcode" maxlength = "50" />
</label>
<input type = "submit" value = "Submit" onclick = "validate()" />
<input type = "reset" value = "Clear" />
</p>
</form>

這是JavaScript代碼：

function validate() {


var firstname = document.getElementById('firstname');
var lastname = document.getElementById('lastname');
var address = document.getElementById('address');
var postcode = document.getElementById('postcode');

if(firstname.value == "") {
    alert("Make sure the first name field is filled");
    return false;
    } 

if(lastname.value == "") {
        alert("Make sure the last name field is filled");
        return false;
        } 
if(address.value == "") {
        alert("Make sure the address field is filled");
        return false;
        } 
if(postcode.value == "") {
        alert("Make sure the post code field is filled");
        return false;
        } 

Answer 1

使用onclick添加return onclick="return validate()"

 function validate() { var firstname = document.getElementById('firstname'); var lastname = document.getElementById('lastname'); var address = document.getElementById('address'); var postcode = document.getElementById('postcode'); if (firstname.value == "") { alert("Make sure the first name field is filled"); return false; } if (lastname.value == "") { alert("Make sure the last name field is filled"); return false; } if (address.value == "") { alert("Make sure the address field is filled"); return false; } if (postcode.value == "") { alert("Make sure the post code field is filled"); return false; } } 

 <form id="contactform" action=""> <label> Name: <input name = "firstname" type = "text" id = "firstname" maxlength = "50"/> </label> <label> Last Name: <input name = "lastname" type = "text" id = "lastname" maxlength = "150" /> </label> <label> Address: <input name = "address" type = "text" id = "address" maxlength = "200"/> </label> <label> Postcode: <input name = "postcode" type = "text" id = "postcode" maxlength = "50" /> </label> <input type="submit" value="Submit" onclick="return validate()" /> <input type="reset" value="Clear" /> </form> 

Answer 2

首先，在表單中添加一個提交處理程序：

<form id="contactform" action = "" onsubmit="handleSubmit()">
  ...
</form>

然后在您的處理程序中驗證輸入。 如果無效，則需要阻止Default（）停止提交表單。 注意：如果沒有錯誤，則必須在validate()末尾return true 。 我沒有在問題中看到這一點。

function handleSubmit(event) {
  if(!validate()) {
    event.preventDefault();
  }
  return;
}