Soumettre deux formulaires avec un seul bouton

Question

J'ai deux formulaires HTML, l'un qui soumet des données à une base de données en utilisant PHP, l'autre qui dirige l'utilisateur vers une page de paiement paypal. Mon problème est que l'utilisateur devrait soumettre les deux formulaires, ce que je ne veux évidemment pas qu'il ait à faire. Existe-t-il un moyen d'utiliser un bouton d'envoi pour deux formulaires ?

(Javascript est le bienvenu)

Answer 1

L'envoi d'un formulaire entraîne la navigation de la page vers l'adresse suivante action de la forme. Vous ne pouvez donc pas soumettre les deux formulaires de la manière traditionnelle. Si vous essayez de le faire avec JavaScript en appelant form.submit() sur chaque formulaire successivement, chaque demande sera interrompue, à l'exception de la dernière soumission. Vous devez donc soumettre le premier formulaire de manière asynchrone via JavaScript :

var f = document.forms.updateDB;
var postData = [];
for (var i = 0; i < f.elements.length; i++) {
    postData.push(f.elements[i].name + "=" + 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("&"));

document.forms.payPal.submit();

Answer 2

Vous devriez être en mesure de le faire avec JavaScript :

<input type="button" value="Click Me!" onclick="submitForms()" />

Si vos formulaires ont des identifiants :

submitForms = function(){
    document.getElementById("form1").submit();
    document.getElementById("form2").submit();
}

Si vos formulaires n'ont pas d'identifiants mais des noms :

submitForms = function(){
    document.forms["form1"].submit();
    document.forms["form2"].submit();
}

Answer 3

Vous pouvez soumettre le premier formulaire en utilisant AJAX, sinon la soumission de l'un empêchera la soumission de l'autre.

Answer 4

Dans Chrome et IE9 (et je suppose que tous les autres navigateurs aussi), seule la dernière demande générera une connexion de socket, la première sera rejetée. (Le navigateur détecte cela car les deux requêtes sont envoyées dans un même "timeslice" JavaScript dans votre code ci-dessus, et rejette toutes les requêtes sauf la dernière).

Si, à la place, vous demandez à un callback d'événement d'effectuer la deuxième soumission (mais avant que la réponse ne soit reçue), le socket de la première demande sera annulé. Ceci est définitivement Rien à recommander car le serveur dans ce cas peut très bien avoir traité votre première demande, mais vous ne pourrez jamais en être sûr.

Je vous recommande d'utiliser/générer une seule requête que vous pouvez traiter côté serveur.

Answer 5

La meilleure réponse actuellement choisie est trop floue pour être fiable.

Cela me semble être un moyen assez sûr de le faire :

(Javascript : utiliser jQuery pour simplifier l'écriture)

$('#form1').submit(doubleSubmit);

function doubleSubmit(e1) {
    e1.preventDefault();
    e1.stopPropagation();
    var post_form1 = $.post($(this).action, $(this).serialize());

    post_form1.done(function(result) {
            // would be nice to show some feedback about the first result here
            $('#form2').submit();
        });
};

Postez le premier formulaire sans changer de page, attendez que le processus se termine. Puis postez le deuxième formulaire. Le deuxième formulaire changera la page, mais vous voudrez peut-être avoir un code similaire pour le deuxième formulaire, en obtenant un deuxième objet différé ( post_form2 ?).

Je n'ai pas testé le code, cependant.