0

我有一个验证表单（使用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>
4

2 回答 2

1

您有一个未关闭的label标签，浏览器正在扩展该标签以包含 thecheckbox和submitbutton。

<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在其中任何一个被点击时都表现得好像被点击了一样。

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

于 2012-08-01T02:28:02.537 回答
0

这之前已在此处讨论过。该演示的链接也应该有所帮助。

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

于 2012-08-01T02:27:42.093 回答