Soumettre deux formes avec un seul bouton

J'ai HTML deux formes, l'une qui envoie des données à l'entrée d'une base de données à l'aide de PHP, l'autre dirige l'utilisateur vers une page de paiement paypal, mon problème est que l'utilisateur aurait à présenter à la fois des formes qui, bien sûr, je ne veux pas qu'ils ont à faire. Est-il de toute façon à utiliser un bouton envoyer pour les deux formes?

(Javascript est la bienvenue)

InformationsquelleAutor Alex Saidani | 2011-10-20
  1. 36

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

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

    Si vos formulaires Id:

    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();
}
    • Est-il quelque chose à voir avec le calendrier? Serait de fixer un court délai entre les observations éventuellement traiter de la question?
    • Pardon mon montage, mais je voulais rétracter mon downvote. Je ne suis pas sûr de ce qu'il advient de la demande. La demande est abandonnée par le navigateur pour sûr, mais il peut encore aller tout le chemin vers le serveur. J'ai essayé de déboguer mon serveur local à l'aide de votre technique et les deux pages ont été en effet appelé, alors peut-être votre façon fonctionne très bien.
    • C'est simplement faux (au moins avec le Chrome et IE9)! Voir ma réponse ci-dessous.
    • est-il sécurisé?..
    • comme pour les sites de paiement ?
    • Salut, je suis par la suite, et il ne soumet que la dernière forme à la fonction javascript. Savez-vous quelle est l'erreur, c'est que?
    • vérifier ma réponse, à soumettre dans la séquence correctement. Avec ce code, il ne veut pas attendre la fin de la première soumettre avant de procéder à la deuxième (et en fonction de facteurs aléatoires, il pourrait parfois être assez rapide pour compléter la demande pour les deux formes et parfois pas ).

    InformationsquelleAutor James Johnson
  2. 33

    La soumission d'un formulaire causes de la page pour naviguer loin de la action de la forme. Donc, vous ne pouvez pas vous présenter à la fois des formes traditionnelles. Si vous essayez de le faire avec JavaScript en appelant form.submit() sur chaque formulaire dans la succession, chaque demande sera annulée, sauf pour la dernière présentation. Donc, vous avez besoin de soumettre la première forme 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();
    • Bonne réponse, mais, selon les circonstances et la façon dont les formes sont soumis, la présentation de la première peut empêcher la présentation de la deuxième (p. ex. à l'aide de l'événement submit d'un formulaire d'appel submit() sur l'autre présentera le premier que dans Firefox).
    • La deuxième forme ne devrait pas être soumise jusqu'à l'objet xhr est fait.
    InformationsquelleAutor gilly3
  3. 10

    Vous pouvez soumettre le premier formulaire avec AJAX, sinon la soumission de l'un va empêcher les autres d'être soumis.

    InformationsquelleAutor RobG
  4. 9

    En Chrome et IE9 (et je devine que tous les autres navigateurs trop), seule la dernière sera de générer une prise connect, le premier sera mis au rebut. (Le navigateur détecte ce que les deux demandes sont envoyées dans un délai d'un JavaScript "timeslice" dans votre code ci-dessus, et annule toutes les mais la dernière demande.)

    Si à la place vous avez un événement de rappel de la deuxième présentation (mais avant la réception d'une réponse), la prise de la première demande sera annulée. C'est certainement rien de recommander que le serveur, dans ce cas, pourrait bien avoir manipulé votre première demande, mais vous ne saurez jamais sûr.

    Je vous recommande d'utiliser/de générer une demande unique qui vous pouvez effectuer des transactions côté serveur.

    • À l'aide de promesses ou en différé, des objets est également une alternative intéressante.
    InformationsquelleAutor Jonas Byström
  5. 6

    Actuellement choisi la meilleure réponse est trop floue pour être fiable.

    Cela se sent à moi comme un relativement sûr de le faire:

    (Javascript: utilisation de jQuery pour écrire qu'il est plus simple) 

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

    Post la première forme sans changer de page, attendez la fin du processus. Puis après la seconde forme.
    Le deuxième poste est à changer de page, mais vous pourriez voulez avoir un code similaire également à la deuxième forme, l'obtention d'un deuxième objet reporté (post_form2?).

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

    • Pourquoi un downvote? Un commentaire serait mieux apprécié, si j'ai écrit quelque chose de mal.
    • Pourquoi êtes-vous à l'aide de deux e1.preventDefault(); et e1.stopPropagation();. je suppose que l'un d'eux aurait suffit. Pour info je n'ai pas downvote. C'est juste que j'ai atteint cette page, et avoir quelques doutes.
    • ils offrent des fonctionnalités différentes, donc, non, pas l'un ou l'autre aurait suffit. preventDefault est bien sûr nécessaire, afin de prévenir le défaut envoyer et à prendre possession de ce qui va se passer avec cet événement. stopPropagation au lieu de cela dépend du cas d'utilisation, dans le cas où l'événement ne doit pas être pris à partir d'éléments extérieurs (ne me souviens pas, mais probablement l'an dernier je l'ai mis -lors de l'encodage à la volée juste pour être sûr ). Et ne vous inquiétez pas, je ne pense pas que vous downvoted (est encore un mystère pourquoi je l'ai eu), mais merci de le préciser
    InformationsquelleAutor Kamafeather
  6. -1

    si vous souhaitez soumettre deux formes avec un seul bouton vous avez besoin pour ce faire:

    1 - utiliser setTimeout()

    2 - permettre à montrer pop up 

    <script>
function myFunction() {
setTimeout(function(){ document.getElementById("form1").submit();}, 3000);   
setTimeout(function(){ document.getElementById("form2").submit();}, 6000);   
}
</script>
<form  target="_blank" id="form1">
<input type="text">
<input type="submit">
</form>
<form target="_blank" id="form2">
<input type="text">
<input type="submit">
</form>

    javascript n'est pas de présenter deux formes dans le même temps. nous présenter deux formes avec un seul bouton pas en même temps mais après secounds.

    edit: lorsque nous utilisons ce code, le navigateur ne permet pas de pop up.

    si vous utilisez ce code pour votre logiciel comme moi venez de définir navigateur pour afficher les pop-up, mais si vous l'utilisez dans la conception de site, le navigateur est un obstacle et le code ne s'exécute pas.

    • L'attente n'est pas d'informer si la première soumettre a réussi ou non (selon le flux de travail de la deuxième forme pourrait avoir besoin pour éviter de soumettre à l'époque), ni de donner aucune garantie de la séquence de traitement de deux demandes (par exemple, dois-je conserver la transaction dans la base de données si la transaction PayPal a-il un échec?). Jetez un oeil à l'alternative la réponse que j'ai écrit; j'ai essayé de donne plus de contrôle sur les flux de travail et les résultats.
    InformationsquelleAutor rezaSefiddashti
  7. -2

    Si vous avez régulièrement bouton "soumettre", vous pouvez ajouter un événement onclick qui ne le suivent:

    document.getElementById('otherForm').submit();
    InformationsquelleAutor endyourif