如何在點擊提交後在html表單中保留輸入的數據

我在html頁面中有一個表單，在點擊提交按鈕後最終被清除。我想知道如何在點擊提交後將數據保留在表單中，以防用戶需要修復任何錯誤。任何幫助，將不勝感激！如何在點擊提交後在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; 
     }

來源

2017-06-06 rajzaveri5

爲什麼用戶想要編輯一些東西，他點擊了提交？ – VivekN

^^因爲沒有人是完美的，可能忘記輸入他們的姓氏等等。隨後不想再填寫他的名字？只是一個預感。 – Zak

頁面刷新時會清除表單，您可以使用ajax，因此頁面不會刷新或在提交後將服務器端數據綁定到輸入字段。 – lilixiaocc

添加return上用onclick 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>

來源

2017-06-06 16:18:52 prasanth

非常感謝您的幫助！ – rajzaveri5

歡迎@ rajzaveri5。我的回答很有用[標記爲答案]（https://www.google.co.in/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cad=rja&uact=8&ved = 0ahUKEwif_KTAjKvUAhXMtY8KHZFLCY4QFggpMAE＆URL = HTTPS％3A％2F％2Fstackoverflow.com％2Fhelp％2Fsomeone-答案與USG = AFQjCNHZ4IpbyGACPNwGrF1LYJUvBvZJGw＆SIG2 = hPdlhiSZ2L321-uLvjDX3A）。其更有益於未來的訪客 – prasanth

首先，提交處理程序添加到您的形式：

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

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

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

來源

2017-06-06 16:23:15

非常感謝你的幫助！ – rajzaveri5

如何在點擊提交後在html表單中保留輸入的數據

回答

相關問題