soumettre plusieurs formulaires à la même page

Question

J'ai trois formulaires sur une page. Ils ont chacun plusieurs entrées, y compris des fichiers. Je voudrais que lorsque je soumets le dernier formulaire, les entrées pour les trois formulaires soient envoyées aux données POST pour le lieu de l'action. Je peux jQuery si nécessaire.

Answer 1

Votre seule option en ce moment est une requête jQuery AJAX (ou XMLHTTP, mais ce n'est pas recommandé).

Essayez de repenser votre conception, je veux dire, pourquoi avez-vous besoin de 3 formulaires sur une page ... c'est trop "formy" pour moi déjà.

Il y a quelque chose que vous pouvez probablement faire: mettre le conteneur boîte de dialogue jQuery UI div dans une forme (cela devrait fonctionner, je suppose) et juste les champs en son sein ...

Answer 2

Vous pouvez les soumettre aux Iframes cachés, de cette façon vous gardez le contrôle de la page hôte.

Vous pouvez écrire une fonction JS qui soumet les trois formulaires.

Answer 3

Vous pouvez essayer d'utiliser serialize() et ajouter la chaîne à votre URL d'action.

Answer 4

Voici comment combiner plusieurs formulaires en un seul. Maintenant, un avertissement: si vous avez plus d'un formulaire avec des entrées de type fichier, vous avez un problème qui est vraiment difficile à résoudre. Le navigateur ne vous laissera pas utiliser XMLHttpRequest (c.-à-d. Ajax, sous n'importe quelle forme) pour publier un formulaire POST en plusieurs parties avec des entrées de fichier. Vous ne serez pas non plus en mesure de créer un nouveau formulaire avec les entrées de fichier, car vous ne pouvez pas définir la valeur des éléments d'entrée de fichier avec Javascript. Ainsi, la seule façon dont cela peut fonctionner est si vous avez plusieurs formes (3?) Et que seulement UNE d'entre elles a des entrées de fichier. Si c'est le cas, alors vous pouvez tirer toutes les entrées (non-fichier) des deux autres formulaires dans l'autre formulaire, puis soumettre celui-ci.

function whenFormsCollide() { 
    // pass in one or more form elements 
    var forms = $.makeArray(arguments); 
    var hasFiles = 0, targetForm = null; 
    $.each(forms, function(i, f) { 
    if ($(f).find('input:file').length > 0) { 
     ++hasFiles; 
     targetForm = f; 
    } 
    }); 
    if (hasFiles > 1) throw "More than one form has 'file' inputs"; 
    targetForm = targetForm || forms[0]; 
    $.each(forms, function(i, f) { 
    if (f === targetForm) continue; 
    $(f).find('input, select, textarea') 
     .appendTo($(targetForm)); 
    }); 
    $(targetForm).submit(); 
} 

Je ne l'ai pas testé, mais je l'ai fait des trucs comme beaucoup de fois et je sais que la construction d'un élément <form> fonctionne très bien, même dans IE6. (IE a parfois des problèmes étranges avec les champs de formulaire, mais je pense que cette partie devrait être OK.) Au pire, au lieu de simplement "déplacer" les champs avec cet appel "appendTo", vous devrez copier les noms et valeurs et créer de nouveaux champs de formulaire.)

Answer 5

Pouvez-vous expliquer le sens de la séparation des informations sous différentes formes et combiner les informations plus tard avec JS? Et lorsque Java Script est désactivé, vos formules ne fonctionnent pas? Mettez tous ensemble dans une forme. Si vous souhaitez évaluer uniquement les champs de données spéciaux de votre formulaire, vérifiez sur le serveur quel bouton de soumission a été enfoncé.

Lorsque vous avez un problème et que vous avez besoin de JS pour résoudre un problème de communication normal, vous avez un problème de conception. JS peut vous aider à personnaliser et donner une meilleure interface utilisateur - mais ce problème est inutile.

Answer 6

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 multiples formes utilisant serialize et combiner ces données et égaliser que pour data paramètre 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('<strong>Processing...</strong><br /><img id="busy" src="./images/progress_bar.gif" border="0" style="display:none;" />'); 
      $("#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 retrieved 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 !!'); 
     } 
    } 
}