使用外部“提交”按钮提交两个不同的表单无法正常工作

我正在创建一个添加到购物车程序，需要将产品及其属性（颜色，大小）添加到购物车中，为此我需要将两个表单一起提交。 我不确定我在哪里出错我创建了脚本，但它只使用jquery而不是其他表单submit()为submit()选择的第一个表单。

下面给出了我的Snippet代码，这是JSFIDDLE

 $(document).ready(function (){ $('#cart').click(function (e1) { var $form = $('#masterform'); var $formcolor = $('#colorform'); var $checkbox = $('.roomselect'); var $checkboxcolor = $('.colorselect'); if (!$checkbox.is(':checked')) { $('#tipdivcontent').css("display", "block"); $("#tipdivcontent").delay(4000).hide(200); e.preventDefault(); } else { if (!$checkboxcolor.is(':checked')) { $('#tipdivcontentcolor').css("display", "block"); $("#tipdivcontentcolor").delay(4000).hide(200); e.preventDefault(); } else { $form.submit(); $formcolor.submit(); } } }); }); 

 #tipdivcontent { border:1px solid black; margin-top:0px; background-color:white; height:50px; width:102px; display:none; position:relative; background-color:red; color:yellow; font-weight:bold; } #tipdivcontentcolor { border:1px solid black; margin-top:0px; background-color:white; height:18px; width:292px; display:none; position:absolute; background-color:red; color:yellow; font-weight:bold; } 

 
 
 
 
Sizes
 
 
 
 2.2 
 
  
 
 2.4 
 
  
 
 
 
 2.6 
 
  
 
 2.8 
 
  
 
 
 
 2.10 
 
  
 
 
 
 
Please Select Size.
  
 
 
 
COLORS
 
 
 
  
 
  
 
  
 
  
 
 
 
 
Please Select Color. 

Answer 1

您可以尝试将辅助表单中的颜色输入分配给“主”表单。 只需在任何输入上使用就可以将该输入分配给另一个表单，而不管它在页面上的位置。

 // When the 'master' form is submitted... $("#masterForm").on("submit", function(e) { "use strict"; // Stop the default action e.preventDefault(); if ($("input[type='radio']:checked").length === 0) { alert("You must check at least one color option."); return false; } // *for logging* // write the contents of the submitted data $("p").html("submitted data: " + $(this).serialize()); console.log("submitted data: " + $(this).serialize()); }); 

  
  
 
  Blue   Red  
  Submit 
 

Answer 2

表单是要通过POST请求（或GET）发送的一组数据。 你所要求的是没有意义的。 如果有可能那么你仍然不应该这样做。 无论HTML和CSS问题是什么让你拆分表格，我建议你把它作为你的实际问题。

Answer 3

提交表单，除非它具有指向框架或其他窗口的目标属性，否则将导致对新页面的HTTP请求。

同时提交两个表格就像是同时关注两个链接。 它无法完成。

你需要：

• 重构您的代码，使其使用单个表单。 这几乎肯定是最有意义的。
• 向页面添加一对框架并将每个表单提交给另一个框架。
• 使用JavaScript收集第一个表单的数据，使用Ajax将其发送到服务器，然后（在收到响应后）提交第二个表单。

Answer 4

如果您想将多个表单作为单个表单发送，我可以建议使用formData对象（文档https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects ）

 var formData = new FormData(); formData.append("size", $('input[name=size]:checked').val()); formData.append("color", $('input[name=color]:checked').val()); var request = new XMLHttpRequest(); request.open("POST", "yourformtarget"); request.send(formData); 

Answer 5

使用javascript的可能解决方案：您可以添加一个属性来查找所有字段，并通过ajax发送表单：

 
  ... 
 ... 
  ...  

javascript中的代码可以是这样的：

 $(document).ready(function (){ $('#cart').click(function (e1) { var data = $('[data-field-of=form1]').serialize(); $.ajax({ url: "post/url", data: data, type: "POST", success: function(response){ /* handle success */ }, error: function(){ /* handle error */ } }); }); });