1 つのボタンで 2 つのフォームを送信するにはどうすればよいですか?

単一のボタンで複数のフォームを送信する

Web 開発では、複数のフォームを同時に送信する必要があるシナリオがよく発生します。ただし、従来のフォーム送信ではページから移動してしまうため、複数のフォームの送信が妨げられます。ここで疑問が生じます: 1 つのボタンを使用して 2 つの異なるフォームを送信するにはどうすればよいですか?

非同期フォーム送信に JavaScript を使用する

ページ ナビゲーションの問題を回避するには、次のようにします。非同期フォーム送信には JavaScript を利用します。これにより、一方のフォームを他方のフォームに影響を与えることなく送信できます。次の JavaScript コードを使用して、2 つの HTML フォームを順番に送信できます:

<script>
// Get references to both forms
var updateDBForm = document.getElementById("form1");
var payPalForm = document.getElementById("form2");

// Submit the first form asynchronously using fetch()
fetch(updateDBForm.action, {
  method: updateDBForm.method,
  headers: { "Content-Type": updateDBForm.enctype },
  body: new FormData(updateDBForm)
})
.then(function(response) {
  // Submit the second form
  payPalForm.submit();
})
.catch(function(error) {
  // Handle any errors
});
</script>

このスクリプト内:

1. getElementById メソッドを使用して両方のフォームへの参照を取得します。 .
2. 最初のフォームを送信するために fetch() 関数が使用されます
3. 最初のフォームが正常に送信されると、2 番目のフォームの送信がトリガーされます。
4. 潜在的なエラーは catch ブロックで処理されます。

これこのアプローチにより、ページの流れを中断することなく両方のフォームを送信できます。

以上が1 つのボタンで 2 つのフォームを送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。