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