仅在至少选中一个复选框时才使用外部提交按钮提交表单

Posted 2023-05-09

【中文标题】仅在至少选中一个复选框时才使用外部提交按钮提交表单

【英文标题】：Submit Form with external submit button only if at least one Checkbox is checked

【发布时间】：2015-10-04 10:14:35

【问题描述】：

我正在制作添加到购物车的程序，但我想将特定产品添加到购物车中，并选择它们的尺寸和颜色等属性。由于我的提交按钮不在表单内，因此只有在选择了尺寸表单中的至少一个复选框时，我才需要使用 Jquery 提交表单，否则单击购物车按钮时，它应该显示 div #tipdivcontent。我无法理解我在哪里出错了。

更新了 FIDDLE 链接，因为插入了错误的链接

下面给出的代码带有 sn-p 和 JSFIDDLE

$(document).ready(function () 
    $('.cartorcheckoutbutton').click(function () 
        var $form = $('#sizesform');
        var $checkbox = $('.roomselect');

        $form.on('submit', function (e) 
            if (!$checkbox.is(':checked')) 
                $('#tipdivcontent').css("display", "block");
                e.preventDefault();
            
        );
    );
);

#tipdivcontent

    display:none;

<input type="submit" value="Cart" class="cartorcheckoutbutton">
<form action="../cart" method="POST" id="sizesform">
    <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="checkbox" id="2.2" name="size" value="twopointtwo">
            </td>
            <td>
                <label for="2.4">2.4</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.4" name="size" value="twopointfour">
            </td>
        </tr>
        <tr>
            <td>
                <label for="2.6">2.6</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.6" name="size" value="twopointsix">
            </td>
            <td>
                <label for="2.8">2.8</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" 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="checkbox" id="2.10" name="size" value="twopointten">
            </td>
        </tr>
    </table>
</form>
<div id="tipdivcontent">Please Select Size.</div>

【参考方案1】：

尝试像这样提交您的表单。

我们也可以通过这种方式触发表单的submit事件。

$(document).ready(function () 
            $('.cartorcheckoutbutton').click(function (e) 
                var $form = $('#sizesform');
                var $checkbox = $('.roomselect');
                if (!$checkbox.is(':checked')) 
                    alert('Please confirm!');
                    $('#tipdivcontent').css("display", "block");
                    e.preventDefault();
                
                else
                    $form.submit();
                
            );            
        );

#tipdivcontent

    display:none;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="submit" value="Cart" class="cartorcheckoutbutton">
<form action="../cart" method="POST" id="sizesform">
    <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="checkbox" id="2.2" name="size" value="twopointtwo">
            </td>
            <td>
                <label for="2.4">2.4</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.4" name="size" value="twopointfour">
            </td>
        </tr>
        <tr>
            <td>
                <label for="2.6">2.6</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" id="2.6" name="size" value="twopointsix">
            </td>
            <td>
                <label for="2.8">2.8</label>
            </td>
            <td>
                <input class="roomselect" type="checkbox" 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="checkbox" id="2.10" name="size" value="twopointten">
            </td>
        </tr>
    </table>
</form>
<div id="tipdivcontent">Please Select Size.</div>

【讨论】：

即使我没有选中任何复选框，它也会根据您的脚本直接提交

现在检查我更新的答案。只有选中了checkbox，才会触发表单的提交事件。

这正是我所期待的。谢谢你。

【参考方案2】：

将您的按钮放在表单中。此外，不需要点击事件。只需使用提交事件。

【讨论】：

我不能把我的提交按钮放在表单中，因为我有一些其他的原因，所以只需要这样做。

那么您的提交事件将永远不会触发。

【参考方案3】：

如果可行，请尝试，

$(document).ready(function () 
  $('#cartorcheckoutbutton').click(function () 
    var $form = $('#sizesform');
    var $checkbox = $('.roomselect');     

        if(!$checkbox.is(':checked')) 
            alert('Please confirm!');
            e.preventDefault();
        else
         $('form#sizesform').submit();
        

  );
);

当我尝试时，它起作用了。

【讨论】：

@hardik-sisodia，试试这个。我已经编辑了我的答案。