Fusionner les valeurs de deux formulaires lors de la soumission

J’ai deux formulaires sur une page HTML. En utilisant jQuery, est-il possible que les données des deux formulaires soient entrées dans les données POST lorsque la première est soumise?

Une approche consiste à copier toutes les entrées de form2 dans form1 une fois que le contrôle de validation des données a réussi. Cela suppose que vous ne faites pas une soumission AJAX.

// new onsubmit function for form1 function form1_onsubmit() { if (!EntryCheck()) return false; $('#form2 :input').not(':submit').clone().hide().appendTo('#form1'); return true; } 

Si vous souhaitez prendre en charge le fait de cliquer sur soumettre deux fois, peut-être en raison de la soumission échouée du serveur, vous devrez supprimer toutes les entrées copiées avant d’en copier de nouvelles.

 // new onsubmit function for form1 function form1_onsubmit() { $('#form1 :input[isacopy]').remove(); if (!EntryCheck()) return false; $('#form2 :input').not(':submit').clone().hide().attr('isacopy','y').appendTo('#form1'); return true; } 

jQuery serialize prend en charge plusieurs éléments de formulaire, il est donc possible de le faire:

 $('#form1, #form2').serialize(); 

Et pour votre cas, vous pouvez faire:

 $('#form1').submit(function() { var action = $(this).attr('action'); if (!EntryCheck()) return false; $.ajax({ url : action, type : 'POST', data : $('#form1, #form2').serialize(), success : function() { window.location.replace(action); } }); return false; }); 

La solution de Lachlan Roche ne copie que les éléments, mais pas les valeurs. Cela prend également en charge les valeurs et peut être utilisé pour gérer les envois de formulaires:

  

Et vos balises de formulaire ressembleraient à quelque chose (notez que les identifiants de formulaire transmis à la fonction sont changés):

 
...

La validation de formulaire peut s’insérer là où vous le souhaitez – cela serait très logique si votre validateur était une autre fonction de l’object émetteur, ou inversement.

Alors que les autres réponses traitent de la question que vous avez posée, il peut être utile de se demander pourquoi vous avez deux formulaires distincts, si vous souhaitez envoyer le contenu des deux formulaires chaque fois que l’utilisateur en soumet un.

Si vous utilisez deux formulaires différents pour les séparer visuellement, une meilleure approche pourrait être d’utiliser CSS pour placer les éléments à l’écran comme vous le souhaitez. De cette façon, vous ne vous fiez pas à la présence de Javascript pour vous assurer que vos formulaires sont correctement remplis.

J’ai utilisé le code ci-dessous pour soumettre les données de deux formulaires sur mon site Web.

L’idée est que vous obtenez les données de formulaires multiples en utilisant serialize et combiner ces données et égaliser cela au paramètre de data de la fonction $.ajax .

.

 // submits two forms simultaneously function submit_forms(form1_id, form2_id) { var frm1_name = $("#" + form1_id).attr('name'); var frm2_name = $("#" + form2_id).attr('name'); if (frm1_name == frm2_name) { alert('The two forms can not have the same name !!'); } else { var frm1_data = $("#" + form1_id).serialize(); var frm2_data = $("#" + form2_id).serialize(); if (frm1_data && frm2_data) { $("#div_busy").html('Processing...
'); $("#busy").fadeIn('slow'); $.ajax( { type: "POST", url: "process_sticker_request.php", data: frm1_data + "&" + frm2_data, cache: false, error: function() { $("#busy").hide('slow'); $("#div_busy").css({'color':'#ff0000', 'font-weight':'bold'}); $("#div_busy").html('Request Error!!'); }, success: function(response) { $("#div_busy").hide('slow'); $("#hdnFormsData").html(response); // open popup now with resortingeved data window.open('', 'popup2', 'toolbars = 1, resizable=1, scrollbars=1, menubar=1'); document.getElementById("prt").action = 'win_sticker.php'; document.getElementById("prt").target = 'popup2'; document.getElementById("prt").submit(); // reset the action of the form document.getElementById("prt").action = 'list_preview.php'; } }); } else { alert('Could not submit the forms !!'); } } }

Il s’agit d’une approche javascript propre à la fusion de deux formulaires. Je le teste sur demande POST avec Prototype et jQuery et ça marche. C’est la chose:

var data1 = document.getElementById (‘form1’). serialize ();

NOTE: ‘form1’ est l’identifiant du formulaire.Vous devez le définir dans

var data2 = document.getElementById (‘form2’). serialize ();

NOTE: ‘form2’ est l’identifiant du formulaire.Vous devez le définir dans

Maintenant, vous avez deux vars et deux données sérialisées (tableaux). Vous pouvez facilement les fusionner. Votre formulaire aura assoc. array et vous pouvez avoir un problème lorsque vous essayez d’utiliser la fonction concat .

var mergeddata = data1 + ‘&’ + data2;

Ça y est …! Vous pouvez facilement les envoyer via un appel ajax. Par exemple (Prototype.js):

nouveau Ajax.Request (url, {méthode: ‘post’, parameters: mergeddata, ….

À bientôt, Kristijan

Une autre façon de fusionner vos propres données en forme sérialiser

  var data = {}; data['key'] = 'value'; e.preventDefault(); $.ajax({ url : url, dataType : 'json', type : 'post', data : $(this).serialize() + '&' + $.param(data), success : function(data) { }, error : function() { } }); 

L’utilisation de la serialize pour combiner des formulaires et les soumettre en utilisant ajax fonctionnait pour moi jusqu’à ce que j’ajoute un bouton “exporter” (pour envoyer des données sous la forme d’un fichier Excel). Pour cela je devais faire un postback complet. J’ai donc fini avec cette méthode. Il choisit la technique de fusion appropriée et corrige certains problèmes avec des boutons, des sélections et des zones de texte en cours de route:

 $("body").on("submit", ".combineForm", function () { var frm = $(this); var action = frm.attr("action"); var method = frm.attr("method"); var target = frm.data("updateTarget"); var combined = $(".combineForm"); //get the submit button that was clicked var btn = $(this).find("button[type=submit]:focus"); var btnName = btn.attr("name"); var btnValue = btn.attr("value"); //create an in memory form to avoid changing the existing form var f = $("
") //Browsers send the name and value of the clicked button but serialize, clone and our copy can't //So add a hidden field to simulate browser behaviour if (btnName) f.append("") if (btnValue === "export") {//exporting to a file needs full submit //merge forms with class 'combineForm' by copying values into hidden inputs // - cloning doesn't copy values of select or textareas combined.find(":input").not("submit").each(function () { var inp = $("") f.append(inp); }); f[0].submit(); return false; } //merge forms for ajax submit var data = combined.serialize() + "&" + f.serialize(); $.ajax({ url: action, type: 'POST', data: data, dataType: "html", success: function (html) { $(target).html(html); } }); return false; });