JavaScript

javascript 連続クリック、2度押し送信防止(リンク・submit)

More than 1 year has passed since last update.

submitの2度押しの二重送信防止

javascriptを書いてformにonSubmitを記述を追加します。
単純に2度押しの場合もありますが、通信が遅くて「あれ?押してなかったかな?」と思って再度送信を押した、って人がいたので、それにあたって書こうと思いました。

「こっちの方がイイよ」とかあれば教えてください。

アラートを表示する

js
<script>
var set=0;
function double() {
if(set==0){ set=1; } else {
alert("只今処理中です。\nそのままお待ちください。");
return false; }}
</script>

</head>
form
<form action="" method="post" onSubmit="return double()">

連続でクリックするとアラートが出ます。

押せなくする

disableを使って、一度押したボタンは押せないようにします。
ページを更新したら押せるように復活します。
CSSでボタンの色を変えたりcursorを指定すると押した人も「あ、押せてる」って安心してイイかも知れませんね。

js
<script>
function double(btn){
btn.disabled=true;
}
</script>
form
<form action="" method="POST">
<input type="submit" name="go" class="test" value="送信" onClick="javascript:double(this)">
</form>
css
input.test {
     width:15%;
     margin:30px 0 0 42.5%;
     padding:5px 0 5px 0;
     border:none;
     background-color:#ffebdc;
     font-family:meiryo; font-size:120%; color:#f96df0;
     cursor:pointer;
     }
input.test:hover {
     width:15%;
     margin:30px 0 0 42.5%;
     padding:5px 0 5px 0;
     border:none;
     background-color:#ffebdc;
     font-family:meiryo; font-size:120%; color:#000000;
     cursor:pointer;
    }
input.test:disabled {
     width:15%;
     margin:30px 0 0 42.5%;
     padding:5px 0 5px 0;
     border:none;
     background-color:#acacac;
     font-family:meiryo; font-size:120%; color:#737373;
     cursor:default;
     }

CSSでdisabledも指定しておくとjavascriptでtrueになった時に反映されます。

リンクの連続クリック防止

これは色んな方法があると思いますが単純なjavascriptで対応しました。
ログイン機能のあるサイトとかだとリンクを連打するとログアウトする時があります。
(sessionをregenerateしてるからか??)
それがどうにもイヤで実装しました。そもそも連打いやだし…。

js
<script>
$('a').click(function() {
$(this).click(function () {
alert('只今処理中です。\nそのままお待ちください。');
return false;
});
});
</script>

</body>

これもアラートが表示されます。
もっとスマートな方法があれば知りたいです。

何を知らないのかがもっと知りたい

色々と勉強していて思った事なんですが、勉強し始めの頃ってアレもコレも、って色々勉強しましたが、一定の時期から実際に書いて色んなモノ作って、他の人の記述と比べて自分の足りない所を発見していくというやり方になりました。
実践は大切だと思うんですが、「え!?今まで全然知らなかった!」っていう重要な事を全くスルーしている時があります。
(header Locationでexitしてないとか)
なんか、こういうの効率よく発見して学べる方法をご存知の方はいないだろうか…。
ここに書くと、色々突っ込んでくれるのでスゴく勉強になるから有り難い。
やっぱりアウトプットする事が大切なんですかね。