Question

我在我正在构建的网站上使用Campaign表单。有多种形式遵循相同的结构（见下文）并使用相同的类名。

使用AJAX将表单发布到Campaign Monitor，如果返回错误消息也添加类，如果正确则显示另一条消息。这工作正常，但它将错误类应用于该页面上的所有表单。由于设计的性质，主页上最多可以达到4个。

如果提交成功，则响应显示，如果不是，则将类或错误（仅红色边框）应用于输入。我以前做过类似的事，但今天无法解决。

问题是在网站刷新之前，当前页面上的所有表单上都会显示响应或错误

        <form action="http://thesocialmediacollege.createsend.com/t/t/s/digdk/" method="post" class="cm-form">
            <input class="input-white" id="fieldName" name="cm-name" type="text" placeholder="First Name" required="" />
            <input class="input-white" id="fieldtrdllu" name="cm-f-trdllu" type="text" placeholder="Last Name" required="" />
            <input class="input-white email-input" id="fieldEmail" name="cm-divur-divur" type="email" placeholder="Email" required />
            <button class="input-btn btn-blue" type="submit" id="submit">Submit</button>
            <h3 class="ash form-alert response">Thanks! We will be in touch.</h3>
        </form>

$('.cm-form').submit(function (e) {
    e.preventDefault();
    $.getJSON(
        this.action + "?callback=?",
        $(this).serialize(),
        function (data) {
            if (data.Status === 400) {
                $(this).find(".email-input").addClass("error");
            } else { // 200
               $(this).find(".response").show();
            }
        });
    });
});

Answer 1

我打赌错误来自$( this )，请尝试缓存它：

$('.cm-form').submit(function (e) {

    var $this = $(this);

    e.preventDefault();
    $.getJSON(
        $this.attr('action') + "?callback=?",
        $this.serialize(),
        function (data) {
            if (data.Status === 400) {
                $(".email-input", $this).addClass("error");
            } else { // 200
               $(".response", $this).show();
            }
        });
    });
});

CM表单，jQuery + $（this）。适用于页面上的所有课程

1 个答案: