How to redirect after a POST method using Fetch?

Question

I posted form data to an API endpoint and I want to redirect the browser to the response text. I seem to not be able to figure out what I am missing. Below is what I have been able to do so far:

  const formEl = document.querySelector("form");
  formEl.addEventListener("submit", (event) => {
    event.preventDefault();
    const formData = new FormData(formEl);
   
    
    const data = new URLSearchParams(formData);
   
    fetch("https://example.com/users", {
      method: "POST",
      body: data
    })
  
       
     .then(async response => console.log(await response.text()))
     .then(window.location.href = (response.text()))

     
  });

`console.log` returns `undefined` so you're redirecting to `undefined` — Quentin, Dec 21 '22 at 18:38
You aren't staying on the same page, so why are you using Ajax in the first place? — Quentin, Dec 21 '22 at 18:38
Oh, its worse then that. `window.location.href = (response.text())` isn't even a function. You need to pass a function to `then`! — Quentin, Dec 21 '22 at 18:42

score 0 · Accepted Answer · answered Dec 21 '22 at 18:39

0

Hope this will help you.

fetch("https://example.com/users", {
    method: "POST",
    body: data
})
    .then(async response => response.text())
    .then(result => {
        window.location.href = result
    });

answered Dec 21 '22 at 18:39

Challenge Win

114
5

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Quentin Dec 21 '22 at 18:40

How to redirect after a POST method using Fetch?

1 Answers1