FUN YOU BLOG

送信ボタンを1回しか押せないフォーム作った

f:id:alfe1025:20140213112925p:plain

データをいろいろ入力するフォームを作ったときに、
**「送信ボタンを何度も押さないでください」**みたいなこと書くのダサいなと思ったので、そもそも送信ボタンを何度も押せないような仕様にしてみた。

デモ

そして、ソースはこちら

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>フォームサンプル</title>
<script type="text/javascript">

// 送信ボタンが押されたら、送信ボタンを使えなくする
function attention() {
	var at_txt = '完了の表示が出るまでお待ちを。'
	document.getElementById("attention").innerHTML= at_txt;
	document.getElementById('submit').disabled = true;
}

// 同ページにフォームの内容を送信するなら、ボタンを復旧する
function finish() {
	alert( "処理を終了しました。");
	var at_txt = '処理を終了しました。'
	document.getElementById("attention").innerHTML= at_txt;
	document.getElementById('submit').disabled = false;
}

</script>
</head>
<body>
	<div class="main">
		
# フォーム

		<form action="form.html" method="post"  onSubmit="attention()">
			<textarea name="data" rows="16" cols="25" placeholder='ここにデータ入力
			(今回は処理への反映なし)'></textarea><br>
			<button id="submit" type="submit">
		    送信
			</button>
		</form>
		<p id="attention"><p>
	</div>

<?php
if($_POST["data"]){

	//時間のかかる処理
	sleep ( 5 );

	//すべて表示したあとに通知アラーム+ボタン復旧
	echo '<script type="text/javascript">finish()</script>';
}
?>

</body>
</html>

注目すべきところとしては、
formタグに onSubmit="attention()" と設定して、
送信ボタンが押されたときに、Javacriptのattention()を呼び出し。
idが'submit'のボタンを disabledに設定して、ボタンを押せなくしています。

また、同ページにフォームの内容が送信される場合は、処理が終えた後に復旧しないといけないので、disabled = false; として、ボタンの無効化を取り消してます。

これで、送信ボタン連打は防げるはず…!