I recently enabled Netlify forms on my site. However, there is an issue. I have code in my JavaScript that basically stops it from reloading the page upon submission. However, it seems to make Netlify unable to retrieve any values.
Please take a look:
HTML:
// some attributes inside
JavaScript:
var ignore = function(event){
event.preventDefault();
};
I am guessing the following does not submit contents to Netlify as Netlofy shows there’s nothing-- not even “spam” submissions–even though I have tested submitting forms myself.
totally get what you are saying, however, i don’t think having event.preventDefault(); is causing problems per se, this is a very common thing to do as having the page reload doesn’t provide a great user experience in most cases.
I’m wondering whether it might be something more foundational about your form setup.
Let’s have you look through here first to see if this helps?
let us know if you can’t make it work even after working through these guides!
I got it to work, however now when I submit the form using Netlify’s code:
let myForm = document.getElementById(“hidden-form”);
let formData = new FormData(myForm);
let messagesf = document.getElementById("messages");
console.log(messagesf);
let test = formData.values();
console.log(test);
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams(messagesf).toString(),
})
.then(() => console.log("Form successfully submitted"))
.catch((error) => alert(error));
}
};
In the console, it prints Form successfully submit but return a Failed to load resource: the server responded with a status of 400 () along with a empty form submission in Netlify
If you are receiving a 400 (Bad Request) that is the function. Looking at the code, you are not sending through the form data read from the form, but messagesf which is an entirely different value.
