Comment puis-je soumettre deux formulaires simultanément avec un seul bouton ?

Soumettre deux formulaires avec un seul bouton

Soumettre deux formulaires avec un seul bouton peut sembler une tâche simple, mais ce n'est pas possible en utilisant les méthodes traditionnelles. méthodes de soumission de formulaire. En effet, la soumission d'un formulaire permet de quitter la page actuelle vers l'action spécifiée dans le formulaire.

La solution : soumission de formulaire asynchrone

Pour soumettre les deux formulaires simultanément, nous devons contourner le processus traditionnel de soumission de formulaires. Nous pouvons y parvenir en soumettant le premier formulaire de manière asynchrone via JavaScript, ce qui nous permet de soumettre le deuxième formulaire sans interférer avec le premier.

Soumission du formulaire asynchrone JavaScript :

Le Le code JavaScript suivant montre comment soumettre le premier formulaire de manière asynchrone :

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("&"));

Une fois le premier formulaire soumis de manière asynchrone, nous pouvons immédiatement soumettre le deuxième formulaire en utilisant la méthode submit() du formulaire standard :

document.forms.payPal.submit();

Solution mise à jour (2023) :

La solution mise à jour utilise fetch () et syntaxe JavaScript moderne :

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

    payPal.submit();
}

Cette solution mise à jour offre une implémentation plus concise et plus performante par rapport à l'original réponse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!