小さなフォームがあるフッターのある Web サイトがあります。このフォームには、メールを受け取るための入力テキスト ボックスと送信ボタンの 2 つしかありません。
ユーザーが [送信] ボタンを押しても、リダイレクトは行われず、代わりに AJAX 呼び出しが実行されて電子メールがデータベース テーブルに追加され、 jQuery を使用して適切なメッセージが表示されますslideDown()
。
問題は、実際には別のページへのリダイレクトが発生しない場合でも、時々ページを更新すると、データが再送信される可能性があるというブラウザの警告が表示されることです。私はいつも来るわけではなく、たまにしか来ません。理由がわからない。
このエラーが発生するのを完全に止めるにはどうすればよいですか?
JSFiddle (以下の注を参照): http://jsfiddle.net/ahmadka/7cZZY/1/
footer_subscribe.php
JSFiddle 内からファイルにアクセスできないため、ここではフォームの再送信エラーが発生しないことに注意してください。ただし、元の実際のページを更新すると、エラーが表示されることがあります。
実際のページ (フォームはページ下部のフッター セクションにあります): http://bit.ly/15eb2Cx
HTML コード:
<section class="subscribe">
<form class="form-wrapper cf" method="post">
<input name="email" placeholder="Enter your email here..." />
<button id="submitBtn" type="submit">Subscribe</button>
</form>
<p></p>
</section>
JavaScript コード:
$(function () {
$("#submitBtn").click(function (event) {
event.preventDefault();
event.returnValue = false;
var inputEmail = $(".subscribe input[name=email]").val();
var inputEmailTrimmed = $.trim(inputEmail);
if (inputEmail == "") {
$(".subscribe p").html("Please enter an email address.").slideDown();
} else if (inputEmailTrimmed == "" && inputEmail != inputEmailTrimmed) {
$(".subscribe p").html("Simply entering spaces won't cut it :)").slideDown();
} else {
$.ajax({
type: "POST",
url: "footer_subscribe.php",
data: {
email: inputEmail
},
success: function (data) {
if (data == "successful") {
$(".subscribe p").html("Thanks for your interest!").slideDown();
} else if (data == "already_subscribed") {
$(".subscribe p").html("This email is already subscribed.").slideDown();
} else if (data == "invalid_email") {
$(".subscribe p").html("This email is invalid.").slideDown();
} else {
$(".subscribe p").html("Something went wrong. Please try again later.").slideDown();
}
},
error: function () {
$(".subscribe p").html("Subscription is not available.").slideDown();
}
});
}
});
});