Gaining Form Attributes from Netlify without reloading the page

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.

How can I fix this?

Is there anyway to submit the data so Netlify is able to see it while maintaining the ability to not reload the page upon form submission?

hi there sazncode,

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

Hey @sazncode

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.