zn12
@zn12 (a j)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

JavaScriptのsubmitの完了を待つ方法

解決したいこと

JavaScriptで、フォーム送信の完了を待ってから、Ajax通信を行う方法を知りたいです。
(同じ要素のクリックで、submitでデータベースの更新を行った最新のデータをfetchAPIで取得したいです。)

該当するソースコード

<form action="post" name="formTest">
    <button type="button" onclick="A(B)" id="test">test</button>
</form>
<script>
    function A(B) {
        formTest.submit();
        B();
    }
    function B() {
        fetch("test.php",
            {
                method: "GET",
                headers: { "Content-Type": "application/json" }
            }
        )
            .then(function (response) {
                if (!response.ok) {
                    throw new Error(response)
                }
                return response.json();
            })
            .then(function (data) {
                if (parseInt(data.check) === 1) {
                    window.alert('success')
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }
</script>

自分で試したこと

上記コード例で、JavaScriptが実行順の通りに動きはするのですが、データベースが更新される前に、fetchAPIがデータを取得してきてしまいます。

0

2Answer

前提として,フォームの送信完了を確実に待てるのは,サーバーがリクエストを受け取った時です.つまり,フォームデータを受け取るページでPHPを動かすのが一番シンプルな実装になります.

ページ遷移を行わずにフォームデータを送信してそれを待ちたければ,HTMLFormElement.submit()に頼らずフォームデータの送信部分すらもajaxで自作する必要が出てきます.

2Like

Comments

  1. Screenshot 2023-05-30 at 11.10.11.png

    .submit()fetch()のようにPromiseとかを返せばサーバー側からの応答待ちが出来るんですがこれには戻り値がないので、.submit()での検知が出来ず、@Vercleneさんの説明のように自前でfetchなりでサーバーにデータを通信する必要が出てきそうです。

    1. formのactionは使わない
    2. formのonsubmitイベント、form#submitへのaddEventListenerなどで自前のサーバー通信を作る
    3. 自前のサーバー通信が返ってきたタイミングで、fetch("test.php", ...)を呼ぶ

    参考:

submitイベントはイベントをキャンセルしないとページ遷移してしまうので、
このときの処理の流れはおそらく
submitイベント(サーバーへデータを送信)

レスポンスが返る前にfetch

レスポンスが返る(ページ遷移)
という状態なのではと推測します。なので先に回答されている方と回答が被りますが、
submitイベント(ただしe.preventdefault()でキャンセル)

JavaScript側でsubmit

レスポンスが返る(ページ遷移しない)

fetch
みたいな処理にするのが正解かと思います。

1Like

Your answer might help someone💌