javascript - HTML/Javascript 表单自动重置

Question

我正在编写接受表单并将其作为“验证”打印到“id="printpeople"”的 javascript。它起作用了，但大约三秒钟后，表单会自行刷新，p 标签也会刷新。除非我点击“提交”按钮，否则页面似乎不会自行刷新。为什么会这样？

HTML:

<form name="form" id="form" class="form" onsubmit="createperson()" method="post">
    <label for="name">Full Name:</label>
    <input type="text" name="name" id="name" /><br>
         ...
    <input type="submit" value="Submit" class="submit" />
</form><br>
<p>People:</p>
<p id="printpeople"></p>

Javascript:

function person(form){
    var name = document.forms["form"]["name"].value;//retrieves name field
      ...
    var person = [name,email,gender,address];//creates new person array
    return person;
}

function createperson(form){
    var personinstance = person(form);
    var personstring = "Name "+personinstance[0]+
            "\n"+"Email "+personinstance[1]+
            ...
    stringholder(personinstance, "write");
}

window.peoplecriteria = ["Name: ","Email: ","Gender: ","Address: "];
window.peoplearray = []; //stores all the people in here
window.peoplestring = "";//string that's used for pretty printing.

function stringholder(parameter, readwrite){
    window.peoplearray.push(parameter);
    window.peoplestring += window.peoplecriteria[0]+window.peoplearray[0];
    document.getElementById("printpeople").innerHTML = peoplestring;
}

Answer 1

通过使用:

<form name="form" id="form" class="form" onsubmit="createperson();return false" method="post">

您应该阻止表单自行提交。

这通过使提交函数返回 false 来实现。默认情况下，onsubmit 函数返回 true。通过返回 false，您声明您不希望提交继续进行。