HTML表单文本onChange事件刷新页面？

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.

Answer 1

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>