Stopping page from refreshing when submitting a form

Question

I'm trying to write some code that takes an input, but I'm having trouble because when the form is submitted the page refreshes.

This is my code:

const changeColour = () => {
  console.log("Submitted");
  const colourForm = document.getElementById("testForm");
  const newColour = colourForm.querySelector("input").value;
  console.log(newFinish);
};

const newForm = vehicle.querySelector(".vehicle-colour");
newForm.addEventListener("submit", changeFinish);

In the console log I get Submitted and the value of newColour, which is my desired output, but it's only there for a split second and then the page refreshes. I'm not too sure how to prevent the page from refreshing.

score 1 · Accepted Answer · answered Oct 28 '21 at 02:32

1

Calling the .preventDefault method of the event fired should stop the page from submitting.

change

newForm.addEventListener("submit", changeFinish);

to

newForm.addEventListener("submit", event => {
  event.preventDefault();
  changeFinish(event);
});

answered Oct 28 '21 at 02:32

async await

1,967
1
8
19

score 1 · Answer 2 · answered Oct 28 '21 at 02:37

1

changeFinish must be a function with "event" as argument.

const changeFinish = event => {
   event.preventDefault();
   /* code here */
}

answered Oct 28 '21 at 02:37

chaosWorm

59
3

Stopping page from refreshing when submitting a form

2 Answers2