- ベストアンサー
Form送信ボタンのダブルクリック防止処理で不思議な現象
- Perl(CGI)でHTMLタグを書いてフォームを作っています。送信(submit)ボタンをダブルクリックする人が多く、それを防止するために色々探していたら、<input type="button" value="送信" onClick="this.disabled=true; this.value='送信中'; this.form.submit();">とすればよいとあったので早速 onClickを付け加え typeのところをsubmitからbuttonに変更しました。そうするとうまくいったのですが、別のページを同じようにすると動きません。
- よく見るとうまくいったものにはnameが入っており、実際には<input type="submit" name="button" value="送信" onClick="this.disabled=true; this.value='送信中'; this.form.submit();">となっていました。つまり、typeをsubmitからbuttonに変更したつもりだったのですが、間違えてtypeはそのままsubmitで、nameをbuttonに変えてしまっていたのです。
- 自分の環境ではこれでうまく動いているのですが、普通に考えるとnameを変えたからといってきちんと動くとは到底思えません。なぜこのようなことになるのでしょうか。これでいいのでしょうか。今思いましたが、ひょっとしてnameを元々変える必要はなく、typeはあくまでsubmit、onClick="this.disabled=true; this.value='送信中'; this.form.submit();"これを付け加えさえすればいいということなのでしょうか。このような処理方法をしているサイトが他に見あたらなかったので、これでいいのかどうか分からず困っています。どなたかアドバイスください。よろしくお願いします。なお、自分のPCはWin2000pro IE6.0SP1で、CGI稼働環境はレンタルサーバーのため詳細非公表で分からないのですが比較的メジャーな会社なのでLinux系だと思います。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは どちらでも動きますが・・・ <input type="button" value="送信" onClick="this.disabled=true; this.value='送信中'; this.form.submit();"> の方が正しいと思います <input type="submit">自体で送信機能があり this.form.submit();は,<input type="submit">を押した状態にする処理です なのでこの2つを併用すると二重送信することになります ですがそうならないのはthis.disabled=trueで<input type="submit">を無効化しているからです 今うまくいっていると思われているものの流れは 『送信』ボタンを押す 『送信』ボタンの無効化（this.disabled=true;) 『送信』ボタンのvalue値を変更(this.value='送信中';) フォーム内容を送信(this.form.submit();) フォーム内容を送信(<input type="submit">)←これを無効化しているのでsubmitボタンを押したことになっていない ので1度の送信で終わっています 試しに <input type="submit" value="送信" onClick="this.disabled=true;"> としてみればよく分かると思います 『送信』ボタンが無効化されるだけで送信されることはありませんので 逆に <input type="submit" value="送信" onClick="this.form.submit();"> とすると二重送信になります うまくいかない理由として考えられるのは ・<form>を忘れている ・<form>～</form>の外にボタンを配置している ・どこか記述ミスをしている のどちらかだと思うのですが・・・
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
name="submit"としていると、 form.submitはボタンのことを意味するようになり、 フォームを送信することでは無くなります。 nameをsubmit以外の名前に変えてみてはいかがでしょうか。
- SAYKA
- ベストアンサー率34% (944/2776)
>ひょっとしてnameを元々変える必要はなく ひょっとしなくても元々変える必要は無いどころか変えると呼出先のCGIが正しく値を受け取れない可能性が出てくるよ。
補足
回答ありがとうございます。 submitボタンのnameでcgiの動作振り分けはしていないし、buttonという名前のものはたまたまなかったので、今回の場合は問題ありませんでしたが、元々の悩みであるtypeはsubmitでいいのでしょうか。 （もちろん他のものと混同させないようにsubmitはsubmitのままにしておく方がいいのでしょうけれど）
お礼
回答ありがとうございました。 <form>を忘れていたり<form>～</form>の外にボタンは配置していません。 今までonClickを記述せず、普通に使っていましたので、そのようなミスはありません。（再確認もしてみました） いずれにしましても、ご回答いただき、onClickや<input type=submit>の処理の流れを理解することができました。 <input type="button" value="送信" onClick="this.disabled=true; this.value='送信中'; this.form.submit();"> でnameを入れると動かないのは相変わらずですが・・・ いずれにしましても、nameを削除すればtype=buttonで動くようになりましたので、ご指摘いただきましたとおりtype=buttonで修正しました。 ありがとうございました。