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

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

1 つのボタンで 2 つのフォームを送信するのは簡単なタスクのように思えるかもしれませんが、従来の方法では不可能です。フォームの送信方法。これは、フォームを送信すると、現在のページからフォームで指定されたアクションに移動するためです。

解決策: 非同期フォーム送信

両方のフォームを同時に送信するには、従来のフォーム送信プロセスをバイパスする必要があります。これは、JavaScript 経由で最初のフォームを非同期に送信することで実現でき、最初のフォームを妨げることなく 2 番目のフォームを送信できるようになります。

JavaScript 非同期フォーム送信:

次の JavaScript コードは、最初のフォームを送信する方法を示しています。非同期:

var f = document.forms.updateDB;
var postData = [];
for (var i = 0; i < f.elements.length; i++) {
    postData.push(encodeURIComponent(f.elements[i].name) + "=" +
        encodeURIComponent(f.elements[i].value));
}
var xhr = new XMLHttpRequest();
xhr.open("POST", "mypage.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(postData.join("&"));

最初のフォームが非同期で送信されると、標準フォームの submit() メソッドを使用して 2 番目のフォームをすぐに送信できます:

document.forms.payPal.submit();

更新されたソリューション ( 2023):

更新されたソリューションでは、fetch() と最新のJavaScript 構文:

function submitBothForms() {
    const { updateDB, payPal } = document.forms;
    fetch(updateDB.action, {
        method: updateDB.method,
        headers: { "content-type": updateDB.enctype },
        body: new FormData(updateDB),
    });

    payPal.submit();
}

この更新されたソリューションは、元の回答と比較して、より簡潔でパフォーマンスの高い実装を提供します。

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