Netlify: No Form Submission Action + Form Submit JS Actions

My website link is https://j2.business, and I have a form setup with netlify but I don’t want it to redirect to another page. I would like to add a notification in the top right that will fade away that says “form successfully submitted, thanks”. How would I go about doing this? I have good enough knowledge of javascript, I’m just curious how to run scripts or something on form submit and not redirect pages.
Thanks in advance!

hi there, welcome.

Are you looking to only run some code after you receive a verified form submission? If yes, then the place to start is looking into lambda functions:

A post was split to a new topic: Success or error code is not available after form submission

Hi, @MyManVan, thanks for your question!

By default, form submissions will always redirect to a new page. To prevent this from happening, you can handle the form submission yourself via JS instead of using the default HTML form submission method. A key piece of this is to add the e.preventDefault to the top of your function, to prevent the event from bubbling up. So something like this would work:

function submitForm(e) {
  e.preventDefault()
  fetch("/", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: this.encode({
          "form-name": "ask-question",
          "form_field": "something"
        })
      })
        .then(() => {
         // custom logic goes here //
        })
}

Hope this helps!

talkForm.addEventListener('submit', function (e){
let formData = new FormData(talkForm);
e.preventDefault()
fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: formData
    })
    .then(() => {
        alert('worked')
    })
})

Would this work? I can’t find much on this topic with netlify.

Yup, that should work!

For some reason I’m getting a 404 error. “Failed to load resource: the server responded with a status of 404 ()”
The link is https://j2.business/#talk. Thanks for the help thus far!

hi there,
something in your code is pointing to an anchor supposedly called #talk - but it seems like this anchor may not exist. I am also seeing the 404 error.

are you hoping to just reload the page?

1 Like

That was the console log

talkForm.addEventListener('submit', function (e){
    let formData = new FormData(talkForm);
    console.log(e.target.action)
    e.preventDefault()
    fetch("/", {
          method: "POST",
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          body: formData
        })
        .then(() => {
            alert('worked');
        })
        .catch(() => {
            alert('failed');
        })
})

I am trying to run some code on successful form submit, and I also don’t want the page to reload and I obviously want to receive the input on netlify.

I figured it out

talkForm.addEventListener('submit', e => {
  e.preventDefault();

  const formData = new FormData(talkForm);
  fetch(talkForm.getAttribute('action'), {
    method: 'POST',
    headers: {
      'Accept': 'application/x-www-form-urlencoded;charset=UTF-8',
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    },
    body: new URLSearchParams(formData).toString()
  })
  .then(res => {
    if (res) {
        alert('worked');
    }
  });
});

With the help of this video/tutorial: How to Make AJAX Form Submissions on Netlify Using Vanilla JavaScript - YouTube

4 Likes

Awesome! So glad to hear you figured it out and we really appreciate you posting your fix here- it will definitely help others (myself included!) who run into the same issue.

1 Like

To make more explicit some of the “gotchas” here for people who may find this issue in the future:

  • make sure you have the correct Content-Type header for your form submissions (if you’re using forms to submit files, the header is different than it is for text data)
  • you can’t send the FormData Javascript instance directly as the body of your POST; you have to encode it as a query string using the URLSearchParams constructor or an encoding function that you write yourself
  • you have to have an action attribute in your HTML form element, and the first argument of your fetch function has to match that attribute

Thanks again, @MyManVan!

3 Likes