JavaScriptのSubmitを待機させたい

Question

submitを待機させたい

フォームでsubmitするときに画像をアップロードするイベントを発火させて、そのイベントが完了してからsubmitする処理を作成したいです。
言い方を変えると、1回ボタンを押したときにアップロードするPOSTの処理をしてその後にフォームのデータをPOSTするという処理を行いたい(1回のボタンのプッシュで2回POSTしたい)です。

このままフォームを送信ボタンを押してもフォームデータは送信されますが、画像のアップロード行われません。(他の所ではこの画像のアップロードの処理は正しく動いています。)

form.submit(() => {
  const event = new Event('click')
  const uploadBtn = document.querySelector('.uploader')
  uploadBtn.dispatchEvent(event)
 })

どのようにすればアップロードを待ってから、フォームをPOSTできるでしょうか？

Answer 1

コールバックかPromiseですね。

或いはアップロードするファイルを選択後、すぐにアップロードを開始し、submitボタンを無効化にする。
アップロードが完了後、またボタンを有効にする。
アップロードボタンを足してもいいです。submitボタンを押すたびにアップロード状態を確認し、認証か断るか判断してもよろしいです。

Comments

[naa07]

自分の説明不足で申し訳ないのですが、1回ボタンを押したときにアップロードするPOSTの処理をしてその後にフォームのデータをPOSTするという処理を行いたい(1回のボタンのプッシュで2回POSTしたい)のですが、これもPromise使ったらできますでしょうか？

[skys215]

はい、AJAXを使えばできます。AJAXは非同期なので、Promiseを使った方がいいです。

Answer 2

Promiseで待たせてからsubmitするとできました

const uploadBtn = document.querySelector('.uploader')
      uploadBtn.dispatchEvent(new Event('click'))
      await new Promise(resolve => {
        const timerId = setInterval(function() {
          if (this.isFileUpload) {
            resolve('待機完了')
            console.log('待機完了')
            clearInterval(timerId)
          }
          console.log(this.isFileUpload)
        }.bind(this), 500)
      })
      const submitForm = document.querySelector('#formTest')
      submitForm.submit()

Answer 3

普通に別windowで先にsubmitすればいいのでは？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  f1.addEventListener('submit',e=>{
    e.preventDefault();
    const nWin=window.open(e.target.action,e.target.target);
    nWin.onload=()=>{
      nWin.close();
      f2.submit();
    };
    f1.submit();
  });
});
</script>
<form method="post" action="1st.php" target="other" id="f1">
<input type="text" name="a" value="123">
<input type="submit" value="send">
</form>
<form method="post" action="2nd.php" id="f2">
<input type="text" name="b" value="456">
<input type="submit" value="send">
</form>