J'ai HTML deux formulaires, l'un qui soumet des données lors de l'entrée dans une base de données en utilisant PHP, l'autre dirige l'utilisateur vers une page de paiement paypal, mon problème est que l'utilisateur devra soumettre les deux formulaires, ce que bien sûr je ne veux pas qu'ils devoir faire. Est-il possible d'utiliser un bouton d'envoi pour deux formulaires?

(Javascript est le bienvenu)

52
Alex Saidani 21 oct. 2011 à 03:14

6 réponses

Meilleure réponse

Vous devriez pouvoir 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'ID mais ont des noms:

submitForms = function(){
    document.forms["form1"].submit();
    document.forms["form2"].submit();
}
42
gilly3 20 oct. 2011 à 23:54

Si vous avez un bouton d'envoi normal, vous pouvez y ajouter un événement onclick qui fait ce qui suit:

document.getElementById('otherForm').submit();
-2
endyourif 20 oct. 2011 à 23:21

Une soumission de formulaire entraîne la page à naviguer vers le action du formulaire. 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 abandonnée à 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();
35
gilly3 20 oct. 2011 à 23:47

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 l'écrire plus simplement)

$('#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 la fin du processus. Postez ensuite le deuxième formulaire. Le deuxième article changera la page, mais vous voudrez peut-être avoir un code similaire également pour le deuxième formulaire, obtenant un deuxième objet différé ( post_form2 ?).

Je n'ai cependant pas testé le code.

6
Kamafeather 1 juin 2017 à 11:16

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

11
RobG 20 oct. 2011 à 23:56

Dans Chrome et IE9 (et je suppose que tous les autres navigateurs aussi), seul ce dernier générera une connexion par socket, le premier sera ignoré. (Le navigateur le détecte car les deux demandes sont envoyées dans une "tranche de temps" JavaScript dans votre code ci-dessus et rejette toutes les demandes sauf la dernière.)

Si vous avez à la place un rappel d'événement lors de la deuxième soumission (mais avant la réception de la réponse), le socket de la première demande sera annulé. Ce n'est certainement rien à recommander car le serveur dans ce cas pourrait bien avoir traité votre première demande, mais vous ne le saurez jamais avec certitude.

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

9
Jonas Byström 29 oct. 2013 à 15:48