HTML/Javascript form resets automatically

Question

I'm writing javascript that takes in a form and prints it as a "verification" to 'id="printpeople"'. And it works, but after about three seconds, the form refreshes itself, and so does the p tag. The page doesn't seem to refresh itself unless I hit the 'submit' button. Why is this happening?

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

Did you know that Stack Overflow supports an inline editor (similar to plunkr or jsbin)? It is posting to where did you say? — Mike Cheel
– Mike Cheel, Commented Apr 2, 2015 at 0:38

grepsedawk · Accepted Answer · 2015-04-02 00:48:31Z

3

By using:

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

You should prevent the form from submitting itself.

This works by making the submit function return false. By default the onsubmit function returns true. By returning false, you state that you do not want the submission to carry through.

edited Apr 2, 2015 at 0:48

answered Apr 2, 2015 at 0:44

grepsedawk

3,4142 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

grepsedawk Over a year ago

Edited answer for more detail.

abagshaw · Accepted Answer · 2015-04-02 00:47:24Z

0

You might be able to stop the form from submitting with the following as your first line in createperson(form):

form.preventDefault();

answered Apr 2, 2015 at 0:47

abagshaw

6,6406 gold badges43 silver badges81 bronze badges

Collectives™ on Stack Overflow

HTML/Javascript form resets automatically

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related