HTML Form Text onChange event refreshes page?

Question

"use strict";

var SEED = "";

function seedSubmit() {
    var input_box = document.getElementById("seed-form");
    SEED = input_box.elements[0].value;
}

<form id="seed-form">
    <p>Seed:</p>
    <input type="text" onchange="seedSubmit(); return false;">
    <input type="button" onclick="seedSubmit()" value="Submit">
</form>

Here's the HTML:

<form id="seed-form">
    <p>Seed:</p>
    <input type="text" onchange="seedSubmit(); return false;">
    <input type="button" onclick="seedSubmit()" value="Submit">
</form>

Here's the JavaScript:

"use strict";

var SEED = "";

function seedSubmit() {
    var input_box = document.getElementById("seed-form");
    SEED = input_box.elements[0].value;
}

I then use the SEED variable for some other stuff. Basically you type into the box and press submit. If the submit button is type="submit", it refreshes the page so it has to be a type="button" then it works fine. But I don't want a button at all I wanna type in the text and press enter. But doing so refreshes the page. How do I prevent this? I did some googling and searching on this site and found a few posts but none of those solutions seemed to work, what am I doing wrong? People say try return false; but that doesn't work for me.

Possible duplicate of [JavaScript code to stop form submission](https://stackoverflow.com/questions/8664486/javascript-code-to-stop-form-submission) — Guillaume Georges, Jun 27 '18 at 16:42
The refresh of the page is the default action of a form submission. In the duplicate above, use [this solution](https://stackoverflow.com/a/8664535/7131746). — Guillaume Georges, Jun 27 '18 at 16:45
use like following LOC `function seedSubmit(e) { e.preventDefault(); //your code }` — Nishant Mendiratta, Jun 27 '18 at 16:46

score 0 · Answer 1 · answered Jun 27 '18 at 16:53

You can add eventListener to "submit" and use the preventDefault method, for example:

var SEED ="";
var form = document.getElementById("seed-form");
form.addEventListener("submit", function(event){
event.preventDefault();
var input_box = document.getElementById("seed-form");
    SEED = input_box.elements[0].value;
console.log(SEED);
});

<form id="seed-form">
    <p>Seed:</p>
    <input type="text" >
    <input type="submit" value="Submit">
</form>

HTML Form Text onChange event refreshes page?

1 Answers1