0

構築中のサイトでキャンペーン フォームを使用しています。同じ構造 (以下を参照) に従い、同じクラス名を使用する複数のフォームがあります。

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

1 に答える 1