javascript - 在同一页面上停止 2 个 Ajax 表单实例相互干扰

Question

我的主页上有两次以下表格:

<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;
    });
});

第一种形式工作得很好，但是正如您在我的工作示例中看到的那样，第二种形式不是:

My website

知道为什么会这样吗？？？？

Answer 1

ID 是唯一的。尝试将表单元素更改为不同的 ID。或者改为使用类。

如果您使用类，您可以在表单 submit() 中使用 $('.messages-class').closest() 以仅在当前表单中进行交互。