버튼 하나로 두 개의 양식을 동시에 제출하려면 어떻게 해야 합니까?

단일 버튼으로 두 개의 양식 제출

하나의 버튼으로 두 개의 양식을 제출하는 것은 간단한 작업처럼 보일 수 있지만 기존 방식으로는 불가능합니다. 양식 제출 방법. 이는 양식을 제출하면 현재 페이지에서 양식에 지정된 작업으로 이동하기 때문입니다.

해결책: 비동기식 양식 제출

두 양식을 동시에 제출하려면, 전통적인 양식 제출 프로세스를 우회해야 합니다. JavaScript를 통해 첫 번째 양식을 비동기적으로 제출함으로써 이를 달성할 수 있으며, 이를 통해 첫 번째 양식을 방해하지 않고 두 번째 양식을 제출할 수 있습니다.

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() 메서드를 사용하여 두 번째 양식을 즉시 제출할 수 있습니다.

document.forms.payPal.submit();

업데이트된 솔루션(2023):

업데이트된 솔루션은 가져오기를 활용합니다. () 및 최신 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();
}

이 업데이트된 솔루션은 이전에 비해 더 간결하고 성능이 뛰어난 구현을 제공합니다. 원래 답변에.

위 내용은 버튼 하나로 두 개의 양식을 동시에 제출하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!