如何在提交时导航禁用html表单？

Question

Lets say I have this form

<form onsubmit="submitData();">
    <input type="text" pattern="^[A-z]+$" required>
    <button type="submit">OK</button>
</form>

Upon clicking the submit button, I don't want the form to post any data in the address bar or navigate anywhere, I just want it to run the submitData function and thats it. The reason I want to use the form is because of its validating functionality (it wont let you submit if the input text is missing or doesn't match the pattern).

If I switch the value of onsubmit on the form to "return false;" then it won't navigate but "submitData(); return false;" doesn't work. Any other ideas?

Answer 1

Try adding e.preventDefault(); at the beginning of your code, with the event being passed to your function submitData(e) { , like this:

function submitData(e) {
    e.preventDefault();
    ...
}

See: https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault

Answer 2

Just add event.preventDefault that is automatically pass by the form to the function:

function submitData(event){
   event.preventDefault();    
   //your code will be here
}

read more : https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault

Answer 3

Use event.preventDefault() .

Learn more: https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault

Answer 4

add this to your code:

document.getElementById("addYourTagHERE").addEventListener("onsubmit", function(event){
        event.preventDefault()
    });

or this in your function:

function submitData(event) {
    event.preventDefault();

}

Answer 5

You'd want to cancel the default action of the submit event handler, so:

function submitData() {
    // whatever logic you have...
    return false;
}

I believe this works too:

function submitData( e ) {
    e.preventDefault();
    // whatever logic you have...
}