1

私のホームページには次のフォームが 2 回あります。

<form id="get-consultation-form" action="javascript:alert('success!');" >
    <h3 class="sub-heading">Book a Consultation</h3>
    <div id="message"></div>
    <div id="fields">
        <input type="text" maxlength="" name="Consultation[name]" placeholder="NAME" />
        <input type="text" maxlength="" name="Consultation[number]" placeholder="NUMBER" />
        <input type="text" maxlength="" name="Consultation[email]" placeholder="EMAIL" />
        <button type="submit" class="btn">Submit</button>
    </div>
</form>

フォームは jQuery/Ajax/PHP を使用して、電子メール経由でデータを転送します。

$(document).ready(function() {

    $("#get-consultation-form").submit(function() {

        var str = $(this).serialize();

        $.ajax({
            type: "POST",
            url: "http://novicecoder.co.uk/priestley/consultation-process.php",
            data: str,
            success: function(msg) {

                $(document).ajaxComplete(function(event, request, settings) {
                NProgress.set(0.0);

                if (msg === 'OK') {

                    result = '<div class="thanks" id="thanks">Thank you, we will contact you <span>shortly.</span></div>';

                    $(this).find("#fields").hide();
                    NProgress.set(0.5);

                    $("#message").hide();
                    $("#message").html(result).slideDown(100);
                    $("#message").html(result);
                }
                else
                {
                    result = msg;
                    $("#message").hide();
                    $("#message").html(result).slideDown(200);
                    $("#message").html(result);
                }
                    NProgress.set(1.0);
                });
            }
        });
    return false;
    });
});

最初の形式は完全に機能していますが、実際の例でわかるように、2 番目の形式はそうではありません。

私のウェブサイト

なぜこれが起こっているのか？

4

2 に答える 2

1

ページに同じ ID を持つ要素を 2 回含めることはできません。ID をクラスに置き換えて#get-consultation-form、問題を解決してください。#fieldsこれは、や などのフォーム内の要素にも適用されます#message。

于 2013-10-04T00:41:38.780 に答える
1

ID は一意です。フォーム要素を異なる ID に変更してみてください。または代わりにクラスを使用します。

クラスを使用する場合、フォーム submit() 内で $('.messages-class').closest() を使用して、現在のフォームでのみ対話することができます。

于 2013-10-04T00:45:47.857 に答える