
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を探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページを作っていたらhtm...
-
ホームページのサイトでhtm...
-
htmlの<input type=”file”>でア...
-
htmlの文字が縦書きになる
-
iPhoneで HTMLファイルを閲覧
-
ホームページの制作について教...
-
HTML/CSSを使って写真のような...
-
HTMLでクロス抽出したい
-
レスポンシブで困っています・・
-
GoogleSearchControlにホームペ...
-
HTML&CSSとHTML5&CSS3の違い...
-
テーブルの行を折りたたみたい...
-
、URL化させるにはどうしたらい...
-
1つの「ホームページビルダー2...
-
css初心者 フレックスボックス...
-
メモ帳の段落の揃え方
-
詳しい方に質問です。 早急に解...
-
Dreamweverは今も主流なんです...
-
動画と画像&タイトル2列を横並...
-
完全素人がノーコードWEB制作の...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
submitをボタン以外にするには
-
フォーム要素以外にもname属性...
-
1アクションでPOST・GET、両方...
-
長文のmailtoの使い方
-
submitの処理の後別の画面を表...
-
送信ボタン押下時に値が未入力...
-
メールフォームの送信ボタンが...
-
リンクをクリックした時にform...
-
リロード時にも<input type="re...
-
mailtoについて
-
type="hidden"を使って時刻を送信
-
複数のフォームを一括で送信す...
-
チャットフォームの悪用
-
Cookieの設定方法がわからない。
-
アンケートのページを作ろうと...
-
tableにformを配置したい。
-
URL パラメータを使ってフォー...
-
メールフォームの作り方で質問です
-
フォームからsubmitをした後再...
-
GETをPOSTに変更したところ 送...
おすすめ情報