Js scroll to view only when the submit complete-CodePudding

Hello I'm trying to scroll into the div only when the submit finishes with promisses

function submitForm(form) {
    console.log("submitForm: ", form);

    return Promise.resolve(() => form.submit());
}

async function submitFm (form) {
    console.log("submitFm: ", form);
    await submitForm(form);
};

submitButton.addEventListener("click", () => {

            submitFm(form).then(() => {
                console.log("should display after submit is done!");
            });


        });

The promise is suppose to work like this, does anyone knows what's missing ? Thanks in advance

CodePudding user response：

The submit() method on a form triggers form submission (and navigation to the result).

As soon as that is triggered, the submit() function finishes.

Then the promise resolves.

Then the then function executes.

Then the browser navigates to the new page.

There is no way for JavaScript running in a web page to directly cause JavaScript to run in the next page the viewport navigates to.

Unloading the current page will kill any JavaScript running in it. The next page, whether it be on the other end of a link, or a form submission or a call to location.reload(), etc. is a blank slate. Any JS in that page runs from scratch.

If you want to cause an effect in it you need to do so by passing a message through something that will persist between page loads.

Examples include a query string on the URL or the Session Storage API.

Then you need JavaScript in the next page to check for that message, act on it, and possibly clean it up so it doesn't effect the next page load.

CodePudding user response：

If you submit a form base on form action, you need to pass the state to the next page. The simpler way is that use an anchor in the URL, URL with a hashtag will scroll to the element that id is the hashtag.

e.g.

<form action="/post/data#id" method="post"></form>

If you submit based on ajax or fetch, you redirect the URL when submitted, you also use hashtags. or you can persistence your data by Storage API, and control the scroll action on the next page.

If you use SPA frameworks like Vue React or others. You can use the router API to handle URL changes on submit. or handle scroll directly when form submits success.