ホームページ > ウェブフロントエンド > jsチュートリアル > 1 つのボタンで 2 つの HTML フォームを同時に送信するにはどうすればよいですか?

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

Barbara Streisand
リリース: 2024-12-02 05:58:17
オリジナル
355 人が閲覧しました

How to Submit Two HTML Forms Simultaneously with One Button?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート