Javascript 使用外部提交按钮提交两个不同的表单工作不正常

我正在创建一个“添加到购物车”程序，需要将带有属性（颜色、大小）的产品添加到购物车，为此，我需要同时提交两个表单。我不确定哪里出了问题，我已经创建了脚本，但它只提交了使用jquery为

submit（）

选择的第一个表单，而没有提交另一个表单

下面是我的代码片段，这是

$（文档）.ready（函数（）{
$（“#购物车”）。单击（功能（e1）{
var$form=$（“#masterform”）；
var$formcolor=$（“#colorform”）；
var$checkbox=$（'.roomselect'）；
var$checkboxcolor=$（'.colorselect'）；
如果（！$checkbox.is（'：checked'））
{
$（'tipdivcontent'）.css（“显示”、“块”）；
$（“#tipdivcontent”）。延迟（4000）。隐藏（200）；
e、 预防默认值（）；
}
其他的
{
如果（！$checkboxcolor.is（'：checked'））{
$（'tipdivcontentcolor'）.css（“显示”、“块”）；
$（“#tipdivcontentcolor”）.delay（4000）.hide（200）；
e、 预防默认值（）；
}否则{
$form.submit（）；
$formcolor.submit（）；
}
}
});
});
#tipdivcontent
{
边框：1px纯黑；
边际上限：0px；
背景色：白色；
高度：50px；
宽度：102px；
显示：无；
位置：相对位置；
背景色：红色；
颜色：黄色；
字体大小：粗体；
}
#tipdivcontentcolor
{
边框：1px纯黑；
边际上限：0px；
背景色：白色；
高度：18px；
宽度：292px；
显示：无；
位置：绝对位置；
背景色：红色；
颜色：黄色；
字体大小：粗体；
}

尺寸
2.2
2.4
2.6
2.8
2.10
请选择尺码。
颜色
请选择颜色。
表单是通过POST请求（或GET）发送的一组数据。你的要求毫无意义。如果可能的话，你还是不应该这么做。无论HTML和CSS问题使您拆分表单，我建议您将其作为实际问题放在这里
 除非表单的目标属性指向框架或其他窗口，否则提交表单将导致HTTP请求新页面

在同一时间提交两个表格就像在同一时间下面两个链接一样。这是办不到的

您需要：


重构代码，使其使用单一表单。这几乎肯定是最有意义的
向页面添加一对框架，并将每个表单提交到不同的表单
使用JavaScript收集第一个表单的数据，使用Ajax将其发送到服务器，然后（在收到响应后）提交第二个表单
如果您想将多个表单作为一个表单发送，我建议您使用formData对象（文档）

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

<div id='masterform'>
    <input name='field_1' data-field-of='form1'>
    ...
</div>
...
<div id='colorform'>
    <input name='field_23' data-field-of='form1'>
     ...
</div>

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


//提交“主”表单时。。。
$（“#母版”）。在（“提交”上，功能（e）{
“严格使用”；
//停止默认操作
e、 预防默认值（）；
如果（$（“输入[type='radio']：选中”）。长度==0）{
警告（“您必须至少选中一个颜色选项。”）；
返回false；
}
//*用于记录*
//写下提交数据的内容
$（“p”）.html（“提交的数据：”+$（this.serialize（））；
log（“提交的数据：+$（this.serialize（））；
});

蓝色
红色
提交
为什么不只使用一个表单？？？@Vanojx1我不能使用一个表单，因为我的购物车按钮、尺寸表和颜色表都位于不同的位置，它们也有不同的css自定义，所以我不能使用单个表单。这一个有一个解决方案，其中表单通过ajax请求提交。在第一次ajax调用成功后提交第二个表单。仅当两个表单都输入了值大小和颜色时，我才需要提交表单。提交表单时，这两个表单至少应有一个勾号，并且我的提交按钮不在表单内部，因此需要从表单外部提交。请参阅上面编辑的代码。通过从表单中移动submit按钮并应用
form='…'
标记，您可以获得相同的结果。关于颜色要求，只需检查无线电输入，并在未检查任何内容时提醒用户即可。
<div id='masterform'>
    <input name='field_1' data-field-of='form1'>
    ...
</div>
...
<div id='colorform'>
    <input name='field_23' data-field-of='form1'>
     ...
</div>

$(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 */ }
        });
    });
});