Question

我有一个验证表单的脚本（使用jQuery Validate），然后提交数据。它目前工作得很好，但现在我需要添加一个复选框，我不清楚如何使用jquery / ajax提交值。我是否需要包含$('#checkBox').attr('checked');之类的内容？如果是这样，我该如何将其传递给ajax？

此外，当我点击“提交”时，如果没有填写表格，复选框会自动检查。为什么会这样？

jquery的：

<script>
$(document).ready(function(){
    $("#formid").validate({
        rules: {
            name: "required",
            email: {
                required:   true,
                email:      true
            },
            mobile: {
                required:   true,
                minlength:  10
            },
            news: {
                required:   false,
            }
        },
        messages: {
            name:   "Please enter your name",
            email:  "Please enter a valid email address",
            mobile: "Please enter your mobile number"
        },
        submitHandler: function() {
                var name        = $('#name').attr('value');
                var email       = $('#email').attr('value'); 
                var mobile      = $('#mobile').attr('value');
                var news        = $('#news').attr('value');

                $.ajax({
                    type: "POST",
                    url: "ajax.php",
                    data: $("#formid").serialize(),
                    success: function(){
                        $('form#formid').hide();
                        $('div.success').fadeIn();
                    }
                });
            return false;
        }
    });
});
</script>

表格：

<form id="formid" method="post">
    <fieldset>
        <div>
            <label for="name">Name</label>
            <input type="text" id="name" name="name" class="required"  />
        </div>

        <div>
            <label for="email">Email</label>
            <input type="text" id="email" name="email" class="required" />
        </div>

        <div>
            <label for="mobile">Mobile</label>
            <input type="text" id="mobile" name="mobile" class="required" />
        </div>
        <label for="news"><p>Please don&rsquo;t send me ongoing news</p>
        <input type="checkbox" id="news" name="news" value="No" />

    <label for="submit1" id="submit"><span>&nbsp;</span>
        <input id="submit1" type="submit" name="submit" value="Submit"/>
        </label>
    </fieldset>
</form>

Answer 1

您有一个未公开的label标记，浏览器正在扩展该标记以包含checkbox和submit按钮。

<label for="news">
    <p>Please don&rsquo;t send me ongoing news</p>
    <input type="checkbox" id="news" name="news" value="No" />
<!-- should close news label here -->    
<label for="submit1" id="submit">
    <span>&nbsp;</span>
    <input id="submit1" type="submit" name="submit" value="Submit"/>
</label>

这导致checkbox和submit的行为就像点击其中任何一个时一样。

修复标记应解决您的问题。

Answer 2

此前已经讨论过here。 this demo的链接也应该有所帮助。

请注意，如果选中，jquery serialize将仅包含复选框值。

jquery验证 - 单击“提交”选中复选框

2 个答案: