
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系だと思います。
No.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>の外にボタンを配置している
・どこか記述ミスをしている
のどちらかだと思うのですが・・・
回答ありがとうございました。
<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で修正しました。
ありがとうございました。
No.2
- 回答日時:
name="submit"としていると、
form.submitはボタンのことを意味するようになり、
フォームを送信することでは無くなります。
nameをsubmit以外の名前に変えてみてはいかがでしょうか。
No.1
- 回答日時:
>ひょっとしてnameを元々変える必要はなく
ひょっとしなくても元々変える必要は無いどころか変えると呼出先のCGIが正しく値を受け取れない可能性が出てくるよ。
この回答への補足
回答ありがとうございます。
submitボタンのnameでcgiの動作振り分けはしていないし、buttonという名前のものはたまたまなかったので、今回の場合は問題ありませんでしたが、元々の悩みであるtypeはsubmitでいいのでしょうか。
(もちろん他のものと混同させないようにsubmitはsubmitのままにしておく方がいいのでしょうけれど)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
今、見られている記事はコレ!
-
弁護士が解説!あなたの声を行政に届ける「パブリックコメント」制度のすべて
社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
-
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」
「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
-
釣りと密漁の違いは?知らなかったでは済まされない?事前にできることは?
知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
-
カスハラとクレームの違いは?カスハラの法的責任は?企業がとるべき対応は?
東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。 この動きは自治体...
-
なぜ批判コメントをするの?その心理と向き合い方をカウンセラーにきいた!
今や生活に必要不可欠となったインターネット。手軽に情報を得られるだけでなく、ネットを介したコミュニケーションも一般的となった。それと同時に顕在化しているのが、他者に対する辛らつな意見だ。ネットニュース...
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
excelをhtmlに変換した途端、一...
-
スマホ(android)のタッチパネ...
-
HTML/CSSを使って写真のような...
-
HTMLでクロス抽出したい
-
レスポンシブで困っています・・
-
ホームページの制作について教...
-
GoogleSearchControlにホームペ...
-
テーブルタグのセルの幅の一部...
-
iPhoneで HTMLファイルを閲覧
-
CSSでinputのテキストカラーを...
-
、URL化させるにはどうしたらい...
-
メモ帳の段落の揃え方
-
HTML&CSS メディアクエリにつ...
-
メディアクエリについて。
-
メディアクエリについて。
-
CSSを教えて下さい webデザイナ...
-
HTMLの CSSのファイルというの...
-
css初心者 フレックスボックス...
-
Dreamweverは今も主流なんです...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
submitをボタン以外にするには
-
フォーム要素以外にもname属性...
-
1アクションでPOST・GET、両方...
-
長文のmailtoの使い方
-
submitの処理の後別の画面を表...
-
送信ボタン押下時に値が未入力...
-
メールフォームの送信ボタンが...
-
リンクをクリックした時にform...
-
mailtoについて
-
type="hidden"を使って時刻を送信
-
リロード時にも<input type="re...
-
複数のフォームを一括で送信す...
-
チャットフォームの悪用
-
Cookieの設定方法がわからない。
-
URL パラメータを使ってフォー...
-
tableにformを配置したい。
-
アンケートのページを作ろうと...
-
メールフォームの作り方で質問です
-
GETをPOSTに変更したところ 送...
-
フォームからsubmitをした後再...
おすすめ情報