Javascript 停止同一页面上相互干扰的两个Ajax表单实例

我在我的主页上两次填写了以下表格：

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

$（文档）.ready（函数（）{
$（“#获取咨询表”）。提交（函数（）{
var str=$（this.serialize（）；
$.ajax({
类型：“POST”，
url:“http://novicecoder.co.uk/priestley/consultation-process.php",
数据：str，
成功：功能（msg）{
$（文档）.ajaxComplete（功能（事件、请求、设置）{
n进展组（0.0）；
如果（消息=='OK'）{
结果='谢谢，我们将很快与您联系'；
$（this.find（“#字段”）.hide（）；
n进展组（0.5）；
$（“#消息”）.hide（）；
$（“#message”）.html（结果）.slideDown（100）；
$（“#消息”）.html（结果）；
}
其他的
{
结果=味精；
$（“#消息”）.hide（）；
$（“#message”）.html（结果）.slideDown（200）；
$（“#消息”）.html（结果）；
}
n进度集（1.0）；
});
}
});
返回false；
});
});

第一种形式运行良好，但正如您在我的工作示例中所看到的，第二种形式不是：

---

知道为什么会发生这种情况吗？？？

一个页面上不能有两个ID相同的元素。将您的

#get consultation form

ID替换为一个类，该类将解决您的问题。这也适用于表单中的元素，如

#字段

和

#消息

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

---

如果你使用类，你可以在表单submit（）中使用$（'.messages class'）.closest（），只用于在当前表单中进行交互。

谢谢你，Jon，我相信你昨天也帮了我：）@SamHolguin是的，我看到该网站进展顺利。你能告诉我在这种情况下如何使用.closest（）吗？我从未使用过Closer（），但我知道它可以扩展DOM？