痔になりやすい生活習慣とは?

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系だと思います。

このQ&Aに関連する最新のQ&A

A 回答 (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>の外にボタンを配置している
・どこか記述ミスをしている
のどちらかだと思うのですが・・・
    • good
    • 0
この回答へのお礼

回答ありがとうございました。
<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で修正しました。
ありがとうございました。

お礼日時:2007/12/03 14:26

name="submit"としていると、


form.submitはボタンのことを意味するようになり、
フォームを送信することでは無くなります。

nameをsubmit以外の名前に変えてみてはいかがでしょうか。
    • good
    • 0

>ひょっとしてnameを元々変える必要はなく


ひょっとしなくても元々変える必要は無いどころか変えると呼出先のCGIが正しく値を受け取れない可能性が出てくるよ。

この回答への補足

回答ありがとうございます。
submitボタンのnameでcgiの動作振り分けはしていないし、buttonという名前のものはたまたまなかったので、今回の場合は問題ありませんでしたが、元々の悩みであるtypeはsubmitでいいのでしょうか。
(もちろん他のものと混同させないようにsubmitはsubmitのままにしておく方がいいのでしょうけれど)

補足日時:2007/11/30 18:26
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJavascriptで二重送信を防止したいが、画像ボタンだとうまくいかない。

Javascriptでフォームの二重送信防止を行いたいのですが、
送信ボタンが画像だとうまく動作しないようです。

下記のサイトを参考に作ってみたのですが、アラートすらもでないようです。
http://www.futomi.com/lecture/javacss/double_block.html

何かよい策がありましたら教えてください。お願いします。

<<ソース>>
<script language="javascript">
<!-- //
function submitForm() {
document.formname.button.disabled = true;
submitForm = disableButton;
document.formname.submit();
return false;
}
function disableButton() {
alert('処理中です。しばらくお待ち下さい。');
return false;
}
// -->
</script>

~以下省略~

<form method="POST" form name="formname" action="test.cgi">

----送信ボタンのコード-----
<input type="image" src="images/acc_send.gif" name="send" onclick="submitForm()">

</form>

Javascriptでフォームの二重送信防止を行いたいのですが、
送信ボタンが画像だとうまく動作しないようです。

下記のサイトを参考に作ってみたのですが、アラートすらもでないようです。
http://www.futomi.com/lecture/javacss/double_block.html

何かよい策がありましたら教えてください。お願いします。

<<ソース>>
<script language="javascript">
<!-- //
function submitForm() {
document.formname.button.disabled = true;
submitForm = disableButton;
docu...続きを読む

Aベストアンサー

参考URLの内容は若干問題ありです。
送信が実行されるのは、送信ボタンのクリックとは限らない(※1)のでformのonsubmitに仕掛けを施した方が万全です。

※1 フォーム内にtype=textのinputがあれば、そこでEnterキーをタイプしただけで送信されるブラウザも多いです。


最初の送信アクションの後に送信ボタンを使用できなくするとか、
二回以上押されたらalertで注意を促すとか(過剰サービス??)の必要がなくてとにかく二重送信さえ防ぐのであれば単純に次のように書けばいいかと思います。
(送信ボタンの種類とかは問いませんし、ボタンのonclickとかも要りません)

<form method="POST" action="test.cgi"
onsubmit="this.onsubmit=function(){return false}">


あと、タグを選ぶのに画像をクリックで送信する必要があるのかどうかも重要です。
<input type="image">はサーバサイトクリッカブルマップの為の要素です。(送信した時にクリックされた位置を一緒に送信します)
これを使うと※1とは逆に画像クリックでなければ送信されないブラウザもあります。画像クリックが必須でないなら、
<button type="submit"><img ~></button>
の方が適しています。
(自動的に画像の周りにボタンっぽい装飾がされますが、これが要らなければスタイルシートでborderやbackgroundを変更する事もできます)

参考URLの内容は若干問題ありです。
送信が実行されるのは、送信ボタンのクリックとは限らない(※1)のでformのonsubmitに仕掛けを施した方が万全です。

※1 フォーム内にtype=textのinputがあれば、そこでEnterキーをタイプしただけで送信されるブラウザも多いです。


最初の送信アクションの後に送信ボタンを使用できなくするとか、
二回以上押されたらalertで注意を促すとか(過剰サービス??)の必要がなくてとにかく二重送信さえ防ぐのであれば単純に次のように書けばいいかと思います。
(送信ボタン...続きを読む

Qonclickイベントでの二重送信防止に関して

onclickイベントでフォームの二重送信の防止をしたいと考えています。

<input "type="submit">が一つしかないページでは、
<input "type="submit" onclick="this.disabled=true;this.value='送信中';this.form.submit();" value="送信">
でうまくいったのですが、
2つ以上あるページだと、クリックすると空白のページに飛んでしまい、フォームが送信できませんでした。

どのようにすれば、<input "type="submit">が2つ以上あるページでも、この方法で二重送信防止を作動させることができるでしょうか。

ご教授よろしくお願いいたします。

Aベストアンサー

document.getElementByIdでも使って対象input要素を取得し、disabled = trueにすればいいのでは。
まずは、onClick()内に直接JavaScriptを書くのをやめればいいと思います。

https://developer.mozilla.org/ja/docs/Web/API/document.getElementById

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qリンクをクリックした時にformからPOST送信したい。

HTML、PHP、JavaScript等でサイトを作っているのですが・・・。

【実現出来ている例】
<form name="form1" method="post" action="Next.php" onSubmit="return InputCheck()">
 <input type="submit" value="送信">
</form>
 submitボタンを一つ置いて、それがクリックされた場合に
formの内容をPOSTで送信する。

【実現したい例】
<form name="form1 method="post">
 <a href="Next.php" onClick="???">???</a>
</form>
 formの中のリンクをクリックされた場合に、formの内容を
POSTで送信したいのですが、その実現方法がわかりません。
GETで送るという手もあり得ますが、今回はどうしてもPOST
したいのですが。

Aベストアンサー

<form name="form1" method="post" action="Next.php">
<a href="#" onClick="document.form1.submit();">???</a>
</form>

onclick内の対象がform1としてあてているので、
アンカータグは別にform内に記述しなくても大丈夫です

form内にhidden等でnameとvalueを持ったパラメータがあればそれも送られます

アンカータグから動的にvalueを変更したい場合は、
document.form1.hogename.value = 'hoge';
等をsubmit()の前に行えば可能です

ただしform内に
<input type="hidden" name="hogename" value="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

QonClickで関数呼出し後に、結果に応じてsubmitを実行する方法

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しません・・・
onClick部分にonClick="return func(),submit();"と記述した場合、
func関数の実行結果がtrueでもfalseでも遷移してしまいます。
そこで、なんとなくonClick="return func()&&submit();"と記述してみたところ、
func関数がtrueの時のみうまく遷移するようになりました。

これは偶然そう動作しているのでしょうか、それとも上記は正しい記述方法なのでしょうか?
正しい記述方法ならいいのですが、上記以外に正式な記述方法があれば
教えていただけないでしょうか?

※TYPE="submit"にすればいいとは思うのですが、buttonで実現したいと
考えております。

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しませ...続きを読む

Aベストアンサー

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右式を結果とする演算子です。よって、funcメソッド、submitメソッド両方を評価するため、funcメソッドの戻り値に関係なく、submitされます。

3.&&で区切った場合、
論理演算子「&&」は、左右ともにtrue(0以外)の場合のみtrueとする演算子です。また、2項論理演算子は左式から評価し、左式だけで全体の結果がわかる場合、右式を評価しません。よって、funcメソッドがfalseを戻した場合、その時点でsubmitを評価しなくても演算結果は必ずfalseとなるのでそこで打ち切られ、trueを戻した場合、submitを評価しないと演算結果を得られないため、遷移したわけです。「&&」を「||(論理和)」に変更すると逆の結果得たと思います。

さて、では3の「&&」が正しいかと言われたら、文法上は正しいです。ただし、他人がみてわかるとは思えません。
そこで、以下の記述はいかがでしょう。読んでみてソースを理解できますか。


<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="func()">
</FORM>

(中略)

// funcの定義
function func() {
 if (a==0) {
  alert("処理しない");
  return ;
 }
 document.FormName.submit();
}

要は、ボタンを押されたら、funcを呼び出せ。
funcでは、aが0ならば、そこで終了しろ。
そうでなければ、documentオブジェクト内のFormNameと言う名前のオブジェクトのsubmitメソッドを呼べ。
です。

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右...続きを読む

Q