投稿をクリックした後に入力したデータをhtml形式で保持する方法

Question

HTMLページに、送信ボタンをクリックすると消去されるフォームがあります。ユーザーがエラーを修正する必要がある場合に備えて、submitをクリックした後にデータをフォームに残す方法を知りたかったのです。どんな助けもありがとう！ここで

は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の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>

で returnを追加します

Answer 2

まず、自分のフォームに提出するハンドラを追加します。

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

次に、あなたのハンドラ内で入力を検証。有効でない場合は、フォームの送信を停止するためにDefault（）を禁止する必要があります。 注：何か問題がなければ、validate()の末尾にreturn trueが必要です。私はその質問にそれを見ない。

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