Heim > Web-Frontend > js-Tutorial > Wie sende ich zwei HTML-Formulare gleichzeitig mit einer Schaltfläche?

Wie sende ich zwei HTML-Formulare gleichzeitig mit einer Schaltfläche?

Barbara Streisand
Freigeben: 2024-12-02 05:58:17
Original
354 Leute haben es durchsucht

How to Submit Two HTML Forms Simultaneously with One Button?

So senden Sie zwei Formulare mit einer Schaltfläche

Im HTML-Dokument ist es möglich, mehrere Formulare mit unterschiedlichen Aktionen zu haben. Allerdings kann es für den Benutzer umständlich sein, beide einzeln einzureichen. In diesem Artikel wird eine Lösung für dieses Dilemma untersucht, indem JavaScript zum gleichzeitigen Senden beider Formulare verwendet wird.

Erstes Formular: Senden von Daten an die Datenbank

Das erste Formular, updateDB, ist für das Senden von Daten an a verantwortlich Datenbank mit PHP. Hier ist ein Beispiel-HTML-Code:

<form>
Nach dem Login kopieren
Nach dem Login kopieren

Zweites Formular: Weiterleitung zur PayPal-Zahlungsseite

Das zweite Formular, PayPal, leitet den Benutzer bei der Übermittlung zu einer Zahlungsseite weiter.

<form>
Nach dem Login kopieren
Nach dem Login kopieren

JavaScript verwenden, um beide Formulare einzureichen

Um beide Formulare gleichzeitig einzureichen, befolgen Sie diese Schritte Schritte:

  1. Erstellen Sie eine JavaScript-Funktion, um das Submit-Ereignis zu verarbeiten.
  2. Verwenden Sie in der Funktion XMLHttpRequest oder fetch(), um das updateDB-Formular asynchron zu senden.
  3. Nachdem das updateDB-Formular erfolgreich übermittelt wurde, senden Sie das PayPal-Formular.
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();
}
Nach dem Login kopieren

Aktualisierter Code mit 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();
}
Nach dem Login kopieren

Fazit

Durch die Nutzung von JavaScript ist es möglich, zwei Formulare mit einer einzigen Schaltfläche zu übermitteln. Dieser Ansatz bietet Benutzern ein nahtloses Erlebnis und vermeidet die Notwendigkeit mehrerer Übermittlungen. Denken Sie daran, die Fehlerbehandlung und Nachrichtenübermittlung an Ihre spezifischen Anforderungen anzupassen.

Das obige ist der detaillierte Inhalt vonWie sende ich zwei HTML-Formulare gleichzeitig mit einer Schaltfläche?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage