1

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

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

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

我的网站

任何想法为什么会这样？？？？

4

2 回答 2

1

您不能在一个页面上两次拥有具有相同 ID 的元素。用类替换您的#get-consultation-formID，这应该可以解决您的问题。这也适用于表单中的元素，例如#fields和#message。

于 2013-10-04T00:41:38.780 回答
1

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

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

于 2013-10-04T00:45:47.857 回答