Fusionar valores de dos formularios en enviar

Question

Tengo dos formularios en una página html. Usando jQuery, ¿es posible que los datos de ambos formularios entren en los datos POST cuando se envía el primero?

Answer 1

Un método consiste en copiar todas las entradas de Form2 en form1 una vez que la verificación de validación de datos tiene éxito. Esto supone que no estás haciendo un envío de AJAX.

// new onsubmit function for form1 
function form1_onsubmit() 
{ 
    if (!EntryCheck()) return false; 

    $('#form2 :input').not(':submit').clone().hide().appendTo('#form1'); 

    return true; 
} 

Si quería atender a golpear presentará dos veces, posiblemente debido a submit fracaso desde el servidor, se necesitaría para eliminar cualquier entrada copiados antes de copiarlos en otros nuevos.

// 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; 
} 

Answer 2

jQuery serializar es compatible con varios elementos de formulario, por lo que es posible hacer:

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

Y para su caso, usted puede hacer:

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

Answer 3

Utilicé a continuación el código para enviar los datos de dos formularios en mi sitio web.

La idea es que se llega a los datos múltiples formas usando serialize y combinar esos datos e igualar a que data parámetro de la función $.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 !!'); 
     } 
    } 
} 

Answer 4

Mientras que las otras respuestas frente a la pregunta que hizo, puede valer la pena considerar por qué tienes 2 formas separadas, si desea enviar el contenido de ambos formas cada vez que el usuario envía una.

Si está utilizando 2 formularios diferentes para separarlos visualmente, un mejor enfoque puede ser usar CSS para colocar los elementos en la pantalla como lo desee. De esta forma, no confía en la presencia de Javascript para asegurarse de que sus formularios estén llenos correctamente.

Answer 5

La solución de Roche Lachlan solo copia los elementos, pero no los valores. Esto se encargará de los valores así, y se puede utilizar para manejar cualquiera de las formas de presentación:

<script type="text/javascript"> 
    var submitter = { 
    combine: function (form1, form2) { 
     $('#' + form1 + ' :input[isacopy]').remove(); 
     $('#' + form2 + ' :input').not(':submit').not('textarea').not('select').each(function() { $(this).attr('value', $(this).val()); }); 
     $('#' + form2 + ' textarea').each(function() { $(this).text($(this).val()); }); 
     $('#' + form2 + ' select').each(function() { $('option[value!="' + $(this).val() + '"]', this).remove(); $('option[value="' + $(this).val() + '"]', this).attr('selected', 'selected'); }); 
     $('#' + form2 + ' :input').not(':submit').clone().hide().attr('isacopy','y').appendTo('#' + form1); 
     return true; 
    } 
    }; 
</script> 

Y (se conmutan cuenta de los identificadores de forma pasados ​​a la función) sus etiquetas de formulario sería algo como:

<form name="my_first_form" id="my_first_form" method="post" onsubmit="if (!submitter.combine('my_first_form', 'my_second_form')) { return false; }"> 
... 
<form name="my_second_form" id="my_second_form" method="post" onsubmit="if (!submitter.combine('my_second_form', 'my_first_form')) { return false; }"> 

La validación de formulario puede encajar allí donde lo desee; tendría más sentido si su validador fuera otra función del objeto del remitente, o viceversa.

Answer 6

este es el enfoque de javascript para combinar dos formularios. Lo pruebo en solicitud POST con Prototype y jQuery y funciona. Esta es la cosa:

var data1 = document.getElementById ('form1'). Serialize();

NOTA: '' es formulario1 forman id.You necesidad de establecer un plazo de < form id = "Form1"> </form>

var datos2 = document.getElementById ('') formulario2.publicar por fascículos();

NOTA: '' es formulario2 forman id.You necesidad de establecer un plazo de < forma id = "Form2"> </form>

Ahora usted tiene dos vars y dos datos serializados (arrays). Puedes fusionarlos fácilmente. Su formulario tendrá una assoc. array y puede obtener un problema cuando intente utilizar la función concat.

var mergeddata = data1 + '&' + data2;

Esto es todo! Puedes enviarlos fácilmente a través de una llamada jaja. Por ejemplo (Prototype.js):

nuevo Ajax.Request (url, { método: 'post', parámetros: mergeddata, ....

Cheers, Kristijan

Answer 7

Uso de serialize combinar formularios y enviarlos usando ajax me funcionaba hasta que agregué un botón de "exportación" (para enviar datos como un archivo de Excel). Para eso tuve que hacer una devolución de datos completa. Así que terminé con este método. Escoge el técnica de fusión adecuada, y corrige algunos de los problemas con botones, selecciones y áreas de texto en el camino:

$("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 = $("<form action='" + action + "' method='" + method + "'/>") 

    //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("<input name='" + btnName + "' type='hidden' value='" + btnValue + "' />") 

    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 = $("<input name='" 
         + $(this).attr("name") 
         + "' type='hidden' value='" 
         + $(this).val() + "' />") 
      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; 
}); 

Answer 8

Otra manera de combinar sus propios datos en forma de serializar

 var data = {}; 
     data['key'] = 'value'; 

     e.preventDefault(); 
     $.ajax({ 
      url : url, 
      dataType : 'json', 
      type : 'post', 
      data : $(this).serialize() + '&' + $.param(data), 
      success : function(data) { 

      }, 
      error : function() { 

      } 
     });