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の両方を含むようにブラウザが拡張している閉じられていないタグがあります。checkboxsubmit

<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 に答える