Form action forwards me to another page showing JSON (JavaScript)

Question

I have a simple (mostly-working) submission form:

<form action="http://127.0.0.1:3000/books" method="POST" class="addBook">
    <input type="text" placeholder="Title" name="title" required>
    <input type="text" placeholder="ISBN" name="isbn" required>
    <button id="submitBook" type="submit" onclick="addingBooks()">Submit</button> 
</form>

My form properly adds the input values to my database and it then appears in the DOM when I go back and refresh the page.

I have applied an preventDefault() function in my JavaScript code for the 'addingBooks()' function to stop it from submitting twice, but I am still unable to stop it from forwarding to the action page after submission which only shows the JSON of the submitted data.

If you need more then please let me know.

Answer 1

To prevent the default action of an event you'll need an event object to call preventDefault on. Some browser do in fact have a global event object but that might not be reliable.
The simplest option would be to return false from the onlick event, not from a function you call in it

<button id="submitBook" type="submit" onclick="addingBooks();return false;">Submit</button>

another simple and better solution would be to make the button be a regular button instead of a submit button and remove the preventDefault from addingBooks.

<button id="submitBook" type="button" onclick="addingBooks()">Submit</button>

another and even better solution would be to not use the onclick attribute at all, use the addEventListener function

document.getElementById('submitBook').addEventListener("click", function(e){
  e.preventDefault();
  //other stuff
});