하나의 버튼으로 두 개의 HTML 양식을 동시에 제출하는 방법은 무엇입니까?

버튼 하나로 두 개의 양식을 제출하는 방법

HTML 문서에서는 다양한 작업을 수행하는 여러 양식이 있을 수 있습니다. 그러나 두 가지를 개별적으로 제출하는 것은 사용자에게 불편할 수 있습니다. 이 기사에서는 JavaScript를 활용하여 두 양식을 동시에 제출함으로써 이 딜레마에 대한 해결책을 탐색합니다.

첫 번째 양식: 데이터베이스에 데이터 제출

첫 번째 양식인 updateDB는 데이터를 데이터베이스로 전송하는 역할을 합니다. PHP를 사용하는 데이터베이스. 다음은 샘플 HTML 코드입니다.

<form>

두 번째 양식: PayPal 결제 페이지로 리디렉션

두 번째 양식인 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를 활용하면 한 번에 두 개의 양식을 제출하는 것이 가능합니다. 단추. 이 접근 방식은 사용자에게 원활한 환경을 제공하므로 여러 번 제출할 필요가 없습니다. 특정 요구 사항에 따라 오류 처리 및 메시지를 맞춤화하는 것을 잊지 마세요.

위 내용은 하나의 버튼으로 두 개의 HTML 양식을 동시에 제출하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!