单击提交后如何以html形式保留输入的数据

Question

I have a form in an html page that ends up being cleared after i click the submit button. I wanted to know how I to make the data stay in the form after clicking submit in case the user needs to fix any errors. Any help would be appreciated!

Here is the html code:

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

and here is the javascript code:

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

Add return with 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> 

Answer 2

First, add a submit handler to your form:

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

Then in your handler validate the input. If its not valid you need to preventDefault() to stop the form from submitting. Note: You'll have to return true at the end of validate() if nothing is wrong. I don't see that in the question.

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