javascript - 使用外部提交按钮提交两种不同的表单无法正常工作

Question

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

下面是我的代码片段，这是 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;
}

<form action="" method="POST" id="masterform">
    <table border="1" cellspacing="0">
        <tr>
            <th colspan="4">Sizes</th>
        </tr>
        <tr>
            <td>
                <label for="2.2">2.2</label>
            </td>
            <td>
                <input class="roomselect" type="radio" id="2.2" name="size" value="twopointtwo">
            </td>
            <td>
                <label for="2.4">2.4</label>
            </td>
            <td>
                <input class="roomselect" type="radio" id="2.4" name="size" value="twopointfour">
            </td>
        </tr>
        <tr>
            <td>
                <label for="2.6">2.6</label>
            </td>
            <td>
                <input class="roomselect" type="radio" id="2.6" name="size" value="twopointsix">
            </td>
            <td>
                <label for="2.8">2.8</label>
            </td>
            <td>
                <input class="roomselect" type="radio" id="2.8" name="size" value="twopointeight">
            </td>
        </tr>
        <tr>
            <td colspan="3" align="center">
                <label for="2.10">2.10</label>
            </td>
            <td>
                <input class="roomselect" type="radio" id="2.10" name="size" value="twopointten">
            </td>
        </tr>
    </table>
</form>
<div id="tipdivcontent">Please Select Size.</div>
<input type="submit" value="To Cart" class="cartorcheckoutbutton" id="cart">
<form action="" method="POST" id="masterform">
    <table border="1" cellpadding="2">
        <tr>
            <th colspan="8">COLORS</th>
        </tr>
        <tr>
            <th title='White' style='background-color:white;' height='15' width='20'>
                <input type='radio' name='color' class="colorselect" value='white'>
            </th>
            <th title='Red' style='background-color:red;' height='15' width='20'>
                <input type='radio' name='color' class="colorselect" value='red'>
            </th>
            <th title='Green' style='background-color:green;' height='15' width='20'>
                <input type='radio' name='color' class="colorselect" value='green'>
            </th>
            <th title='Blue' style='background-color:blue;' height='15' width='20'>
                <input type='radio' name='color' class="colorselect" value='blue'>
            </th>
        </tr>
    </table>
</form>
<div id="tipdivcontentcolor">Please Select Color.</div>

Answer 1

您可以尝试将辅助表单中的颜色输入分配给您的“主”表单。只需使用 <input form='formID' ...>在任何输入上都会将该输入分配给其他表单，而不管它在页面上的什么位置。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="masterForm">
  <input name="someField" type="text" value="test value">
</form>

<form id="anotherForm">
  <label>
    <input name="color" type="radio" value="blue" form="masterForm">Blue
  </label>
  <label>
    <input name="color" type="radio" value="red" form="masterForm">Red
  </label>
</form>

<!-- Submit button outside of the form -->
  <button type="submit" form="masterForm">Submit</button>

<p></p>

如果上述选项(和附加的代码段)对您不起作用，请尝试将您的 formData 附加到相关字段。像这样的东西(未经测试):

// When the 'master' form is submitted...
  $("#masterForm").on("submit", function(e) {
  "use strict";
  // Stop the default action
  e.preventDefault();

  var submissionData = $(this).serialize();
  submissionData += "&color=" + $("#slaveForm").find("input[name='color']:checked").val()

  // do stuff ...
});