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的元素。将您的#get-consultation-form ID替换为可以解决问题的类。这也适用于表单中的元素，如#fields和#message。

Answer 2

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

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

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

2 个答案: