web-dev-qa-db-fra.com

Soumettez deux formulaires avec un seul bouton

J'ai deux formulaires HTML, l'un qui soumet les données lors de la saisie à une base de données à l'aide de PHP, l'autre qui dirige l'utilisateur vers une page de paiement Paypal. devoir faire. Est-il possible d'utiliser un bouton de soumission pour deux formulaires?

(Javascript est le bienvenu)

javascripthtmlforms
46
Alex Saidani

Vous devriez pouvoir faire cela 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'identifiant mais ont un nom:

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

Une soumission de formulaire entraîne le déplacement de la page vers le action du formulaire. Donc, vous ne pouvez pas soumettre les deux formulaires de manière traditionnelle. Si vous essayez de le faire avec JavaScript en appelant form.submit() successivement sur chaque formulaire, chaque demande sera annulé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();
34
gilly3

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

10
RobG

Dans Chrome et IE9 (et je devine également tous les autres navigateurs)), seul ce dernier générera une connexion de socket, le premier sera ignoré. (Le navigateur le détecte lorsque les deux demandes sont envoyées. dans un code "timeslice" JavaScript dans votre code ci-dessus et rejette tout sauf la dernière demande.)

Si vous avez un rappel d'événement à la place lors de la deuxième soumission (mais avant que la réponse ne soit reçue), le socket de la première demande sera annulé. C’est définitivement 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 requête unique que vous pouvez traiter côté serveur.

9
Jonas Byström

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. Puis postez le deuxième formulaire. Le deuxième article changera la page, mais vous voudrez peut-être un code similaire également pour le deuxième formulaire, obtenant un deuxième objet différé ( post_form2 ?) .

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

6
Kamafeather