Heim >Web-Frontend >js-Tutorial >Wie kann ich zwei Formulare mit einer Schaltfläche senden?

Wie kann ich zwei Formulare mit einer Schaltfläche senden?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-30 22:24:13995Durchsuche

How Can I Submit Two Forms with One Button?

Mehrere Formulare mit einer einzigen Schaltfläche senden

In der Webentwicklung treten häufig Szenarien auf, in denen mehrere Formulare gleichzeitig übermittelt werden müssen. Bei herkömmlichen Formularübermittlungen wird jedoch die Seite weggeführt, was die Übermittlung mehrerer Formulare erschwert. Dies wirft die Frage auf: Wie können Sie zwei verschiedene Formulare mit einer einzigen Schaltfläche senden?

JavaScript für die asynchrone Formularübermittlung verwenden

Um das Problem der Seitennavigation zu umgehen, können wir dies tun Verwenden Sie JavaScript für die asynchrone Formularübermittlung. Dies ermöglicht die Übermittlung eines Formulars, ohne das andere zu beeinträchtigen. Mit dem folgenden JavaScript-Code können zwei HTML-Formulare nacheinander übermittelt werden:

<script>
// Get references to both forms
var updateDBForm = document.getElementById("form1");
var payPalForm = document.getElementById("form2");

// Submit the first form asynchronously using fetch()
fetch(updateDBForm.action, {
  method: updateDBForm.method,
  headers: { "Content-Type": updateDBForm.enctype },
  body: new FormData(updateDBForm)
})
.then(function(response) {
  // Submit the second form
  payPalForm.submit();
})
.catch(function(error) {
  // Handle any errors
});
</script>

In diesem Skript:

  1. Wir rufen Referenzen auf beide Formulare mit der Methode getElementById ab .
  2. Die fetch()-Funktion wird verwendet, um das erste Formular asynchron zu senden.
  3. Sobald das erste Formular erfolgreich übermittelt wurde, Wir lösen die Übermittlung des zweiten Formulars aus.
  4. Wir behandeln potenzielle Fehler im Catch-Block.

Dieser Ansatz ermöglicht die Übermittlung beider Formulare, ohne den Seitenfluss zu unterbrechen.

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

Stellungnahme:
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