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.
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);
});
changeFinish must be a function with "event" as argument.
const changeFinish = event => {
event.preventDefault();
/* code here */
}