Comment soumettre deux formulaires HTML simultanément avec un seul bouton ?

Comment soumettre deux formulaires avec un seul bouton

Dans le document HTML, il est possible d'avoir plusieurs formulaires avec des actions différentes. Cependant, les soumettre tous les deux individuellement peut être gênant pour l'utilisateur. Cet article explore une solution à ce dilemme en utilisant JavaScript pour soumettre les deux formulaires simultanément.

Premier formulaire : soumission des données à la base de données

Le premier formulaire, updateDB, est responsable de l'envoi des données à un base de données utilisant PHP. Voici un exemple de code HTML :

<form>

Deuxième formulaire : redirection vers la page de paiement PayPal

Le deuxième formulaire, PayPal, dirige l'utilisateur vers une page de paiement lors de la soumission.

<form>

Utiliser JavaScript pour soumettre les deux formulaires

Pour soumettre les deux formulaires simultanément, suivez ces étapes :

1. Créez une fonction JavaScript pour gérer l'événement de soumission.
2. Dans la fonction, utilisez XMLHttpRequest ou fetch() pour soumettre le formulaire updateDB de manière asynchrone.
3. Une fois le formulaire updateDB soumis avec succès, soumettez le formulaire PayPal.

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();
}

Mise à jour Coder avec 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();
}

Conclusion

En tirant parti de JavaScript, il est possible de soumettre deux formulaires avec un seul bouton. Cette approche offre une expérience transparente aux utilisateurs, évitant ainsi le besoin de soumissions multiples. N'oubliez pas d'adapter la gestion des erreurs et la messagerie en fonction de vos besoins spécifiques.

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!