When using window.fetch is there a way to actually "submit()" the form?

Question

Say I have a web page and I want it to automatically "go to" some form. This sort of thing works fine:

script(type = 'text/javascript').
    var ff = document.createElement("form")
    document.body.appendChild(ff)

    var ii = document.createElement("input")
    ii.setAttribute("type","hidden")
    ii.setAttribute("height", 69)
    ff.appendChild(ii)

    ff.method = "POST"
    ff.action = window.location + "/someform"
    ff.submit()

However, it's much easier to use fetch to send a form:

script(type = 'text/javascript').
    fetch("/someform", {
    method: "POST",
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({height: 69})
    })

However that does not actually "go to" the new page, /someform.

Is there actually a way to make fetch "go to" the form in question, rather than just fetch the results behind the scene?

If the goal is to submit the form normally then why use AJAX at all? It sounds like simply removing that functionality and using a normal HTML form is what you want. (As an aside... What is script(type = 'text/javascript').? Additionally, you should definitely get in the habit of terminating statements with semicolons. Omitting those commonly leads to strange bugs.) — David
– David, Commented May 12 at 16:52
@David Cheers, I assumed it was obvious I meant .. "I want it to automatically go to some form ...", thanks I edited that in case it causes confusion. The question is about fetch .. is there actually a way to make fetch "go to" the form in question, rather than just fetch the results behind the scene? TY — Fattie
– Fattie, Commented May 12 at 16:55
The simple answer is no. When you use AJAX, the browser doesn't do anything automatically. The JS code decides what to do. It could do a redirect after getting the response, but that won't be the same as what gets returned by the form action. — Barmar
– Barmar, Commented May 12 at 16:56
@Fattie: Well, that depends on the specifics of what you want to do. fetch doesn't perform a navigation. But if you want to perform a navigation then you can do that in JavaScript. Have you tried that? — David
– David, Commented May 12 at 16:56
Hey @Barmar ! Good one, a clear "No" answer is is often so helpful. You should put it in. — Fattie
– Fattie, Commented May 12 at 16:57

Barmar · Accepted Answer · 2025-05-12 16:59:49Z

4

No, there's no way to make fetch() automatically navigate. In general, we use AJAX because we don't want to reload the page with the form response; if that's what you want, use form.submit().

You can navigate away after getting the AJAX response, but that won't generally be the same as reloading with the HTML returned by the action URL.

answered May 12 at 16:59

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Solt · Accepted Answer · 2025-05-28 22:41:10Z

0

+50

The answer is Yes!

You can get the contents from fetch, change the visible location with function history.pushState() and totally replace document.documentElement.innerHTML with fetched data. The only thing that will be lost - some http headers which could affect the behavior of the page.

The answer is No!

In most cases once you received the response from server on your POST-request its state will never be the same. If you just walk to new location /someform server will not receive POST and the reply will differ from the reply you already consumed by fetch. Of course there are some servers that always reply the same ( something like 'OK'). But don't get your hopes up.

In both cases be ready to get some bounties from CORS :•)

So, which answer do you prefer?

edited May 28 at 22:41

answered May 28 at 22:21

Solt

1,5013 silver badges17 bronze badges

Collectives™ on Stack Overflow

When using window.fetch is there a way to actually "submit()" the form?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related