时间戳

首页 > 解决方案 > jQuery，阻止表单提交，然后继续

jquery - jQuery，阻止表单提交，然后继续

问题描述

我有一个带有 2 个单选按钮和一个复选框的简单表单。复选框取决于单选按钮。这意味着，如果选中了 id="rd1" 的单选按钮，则该复选框也应选中，否则不应提交表单。如果选中 id="rd0" 的单选按钮，则可以提交表单。

它是这样写的：

<form>
<input type="radio" name="rd" value="0" id="rd0" required="required" />
<input type="radio" name="rd" value="1" id="rd1" required="required" />

<input type="checkbox" name="ckbx" value="sample_value" id="ck" />

<button type="submit" name="send" id="sbmt" >Submit Me!</button>
</form>

所以，现在我已经使用 jQuery 编写并测试了 2 段代码，但每段代码的功能都不同。

第一的：

$('#sbmt').click(function(event){
        event.preventDefault();
        if($('#rd1').is(':checked') && $('#ck:checked').length == 0){
            alert('You didn't select the checkbox! /facepalm ');
        }else{
            $('form').submit();
        }
    });

这段代码，无论如何都要提交表单！如果我不选择任何单选按钮，它甚至不会触发该required属性的浏览器警报。

现在，第二段代码：

$('form').submit(function(event){
        event.preventDefault();
        if($('#rd1').is(':checked') && $('#ck:checked').length == 0){
            alert('You didn't select the checkbox! /facepalm ');
        }else{
            $('form').submit();
        }
    });

另一方面，当if条件为真时，这完美地显示了警报。但它不会在没有提交表单时提交。不用说，required单选按钮的属性在这里完美无缺。

百分百感谢您的帮助。谢谢

标签： jqueryformssubmit

解决方案

我认为您对 event.preventDefault() 有误。

$('form').submit(function(event){
        if($('#rd1').is(':checked') && $('#ck:checked').length == 0){
            event.preventDefault(); // prevent only when condition is true, otherwise submit
            alert('You didn't select the checkbox! /facepalm ');
        }
});

推荐阅读