0

ここに私のフォームのマークアップがあります

                <form name="contactForm" id="contactForm" role="form">
                    <div style="width: 190px">
                        <div class="form-group">
                            <input type="text" placeholder="fullname" name="fullname" id="formFullname" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="email" placeholder="email" name="email" id="fromEmail" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="company" name="company" id="fromCompany" class="form-control">
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="form-group">
                        <textarea placeholder="message" name="message" id="formMessage" rows="3" class="form-control"></textarea>
                    </div>

                    <button class="btn btn-success" type="submit" name="submit" id="formSubmit">send</button>
                </form>

jquery 1.10.2 の使用

そして、ここにJSがあります

 var form = $('#contactForm');

form.submit(function () {
    console.log("form ", $(this).serialize());
    $.ajax({
        type: "POST",
        url: url + "ajax/sendmail",
        data: $(this).serialize(),
        success: function (response) {
            console.log(response);
        }
    });
    return false;
});

アラートでテストされた関数が起動することを知っています。しかし、console.log は何も返さず、ajax 呼び出し中に POST に何も表示されません (Firebug の XHR で監視)。

ところで: role="form" は、私が Twitter Bootstrap フレームワークを使用しているためです。

私は何を間違っていますか？

アップデート

データ: $(form).serialize() も役に立ちませんでした

4

2 に答える 2

1

これを試してみると：

form.submit(function () {
    console.log("form ", $(this).serialize());
    return false;
});

それはうまく動作します。だから私は問題だと思う

form.on('submit',function () {
    event.preventDefault();
    console.log("form ", $(this).serialize());
    $.ajax({
        type: "POST",
        url: url + "ajax/sendmail",
        data: $("form").serialize(),
        success: function (response) {
            console.log(response);
        }
    });
    return false;
});

あなた$(this)のコードでは を参照しているのではformなくjQuery、ajaxメソッドが呼び出されたものを参照しているためです

于 2013-09-01T17:19:31.580 に答える
0

次のコードを試してください。ただし、最初にフォームの HTML を変更して、"action" 属性を持つようにします。このコードの良いところは、送信ボタンとアクション属性を持つ任意のフォームで使用できることです。(つまり、特定の ID に関連付けられていません)

$(function() {

    $('input[type="submit"]').click(function(event) {
        event.preventDefault();
        var form = $(this).closest('form');
        var url = form.attr('action');
        var data = form.serialize();
        $.post(url, data)
            .done(function() {
                alert('Yay! your form was submitted');
            })
            .fail(function() {
                alert('Uh oh, something went wrong. Please try again');
            });
    });

乾杯。

于 2013-09-01T20:26:04.130 に答える