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

1 つのボタンで 2 つのフォームを送信する方法

HTML ドキュメントでは、異なるアクションを持つ複数のフォームを使用することができます。ただし、両方を個別に送信するのはユーザーにとって不便な場合があります。この記事では、JavaScript を利用して両方のフォームを同時に送信することで、このジレンマの解決策を検討します。

最初のフォーム: データベースへのデータの送信

最初のフォーム、updateDB は、データをデータベースに送信する役割を果たします。 PHPを使ったデータベースです。サンプル HTML コードを次に示します。

<form>

2 番目のフォーム: PayPal 支払いページへのリダイレクト

2 番目のフォーム payPal は、送信時にユーザーを支払いページに誘導します。

<form>

JavaScript を使用して両方のフォームを送信する

両方のフォームを送信するには同時に、次の手順に従います。

1. 送信イベントを処理する JavaScript 関数を作成します。
2. 関数内で、XMLHttpRequest または fetch() を使用して、updateDB フォームを非同期的に送信します。
3. updateDB フォームが正常に送信されたら、payPal フォームを送信します。 form.

function submitBothForms() {
    // Submit updateDB form asynchronously via XMLHttpRequest
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "mypage.php", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(postData.join("&"));

    // Submit payPal form
    document.getElementById("payPal").submit();
}

Fetch() でコードを更新

async function submitBothForms() {
    // Submit updateDB form asynchronously via fetch()
    const res = await fetch("mypage.php", {
        method: "POST",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        body: new FormData(updateDB),
    });
    if (!res.ok) throw new Error("DB Update Failed!");

    // Submit payPal form
    payPal.submit();
}

結論

JavaScript を活用することで、1 つのフォームで 2 つのフォームを送信することが可能になりますボタン。このアプローチは、ユーザーにシームレスなエクスペリエンスを提供し、複数の送信の必要性を回避します。特定の要件に基づいてエラー処理とメッセージングを調整してください。

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