Prevent form from refreshing the page

Question

Hey I am trying to use a form to submit data via JavaScript but it keeps refreshing the page when I don't want it to.

My form is like this:

<form name="myForm" method="post">

<input type="text" name="name"/>
<input type="submit" name="add" value="Add Resource" onclick="insert(); return false;"/>

</form>

My JS function has:

function insert(e){
e.preventDefault();
    var name = document.myForm.name;
    console.log(name);    
}

I was told prevent default is how you stop the default action of the form but it still happens for me. How do I fix it ?

Answer 1

You're not passing in e though. Instead, it would be better to bind to the form with JavaScript rather than using an attribute:

document.querySelector('[name=myForm]').addEventListener('submit', function (e) {
    e.preventDefault();
});

You could also bind to the click event of the submit input