セックスに翻弄される女性、男性の生きていく姿を描いた映画3選

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

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

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

<<ソース>>
<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>

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

A 回答 (3件)

参考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を変更する事もできます)

この回答への補足

すみません、下のコメントは別の人のお礼でした。

<form method="POST" action="test.cgi"
onsubmit="this.onsubmit=function(){return false}">
このコードだけでも十分二重送信を防ぐことができました!
ありがとうございます。

確かに、、画像クリックするとは限らないですね。
しかし、色々なブラウザに対応しなければならないので、
画像クリックとEnterの両方に対応しないといけない感じですねぇ。

補足日時:2007/09/21 10:42
    • good
    • 0
この回答へのお礼

()だけの問題かなぁと思ったら、確かにIEでも動きました。
ありがとうございます。

お礼日時:2007/09/21 10:41

こんにちは



試してみたところアラートが出ないのは
submitForm = disableButton;

submitForm = disableButton();
と()が抜けているせいだと思います

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

<form method="POST" form name="formname" action="test.cgi">
<img src="images/acc_send.gif" name="send" onClick="submitForm()" style="cursor:pointer;">
</form>

でできませんか?
    • good
    • 0
この回答へのお礼

()だけの問題かなぁと思ったら、確かにIEでも動きました。
ありがとうございます。

お礼日時:2007/09/21 10:41

こんにちは



<input type="image">自体で<input type="submit">と同じ効果があるためではないでしょうか?

参考サイトの下のほうにあるように
<img src="images/acc_send.gif" name="send" onClick="submitForm()">
としてみては?
    • good
    • 0
この回答へのお礼

すばやいご回答ありがとうございます。

参考サイトの通りに
<img src="images/acc_send.gif" name="send" onClick="submitForm()">
このように書くと、画像がクリックできなくなるんです。
なので、input typeに書き換えたのですよ。

ちなみに、BODYタグ内にスクリプトを書いたら動きました。
しかし、FireFoxではうまくいくのですがIEだけはNGのようです。
IEに対応するためにはどうしたらよいでしょうか。

お礼日時:2007/09/20 17:42

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

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

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

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

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つの文となります。この「,」は、左右の式を評価して、右...続きを読む

Q2度押しを防止したいのですが?

お世話になります。
超初心者です。

下記のLINKボタンを二度押し防止したいのです。
function post()のjavascript にどう書き足せば
2度押し防止できるでしょうか?
できるだけ簡単な式ですと助かるのですが。
どづか宜しくお願い致します。


function post(){
var postform = document.getElementById("form_name");
postform.action = './link.php?no=1';
postform.submit();}

<input type="button" value="LINK" onclick="post();">

Aベストアンサー

<script type="text/javascript">
var oshitayo = 0;

function post(){
if(oshitayo==1){
alert("2度押しだべ");
return;
}else{
oshitayo = 1;
}
var postform = document.getElementById("form_name");
postform.action = './link.php?no=1';
postform.submit();}
</script>
<input type="button" value="LINK" onclick="post();">


厳密ではありませんが簡易的に・・・

QonClickがinput type="image"だとできない!

以前、↓の質問をさせていただき解決したのですが、
input type="image" にしたいのですが、
ただ変更するだけでは、できません。
http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911

どのように変更したらいいでしょうか?
教えてください!

現在下記の方法でやっています。
<style type="text/css">
.white{
background-Color:white;
color:black;
}
.gray{
background-Color:gray;
color:yellow;
}
.blue{
background-Color:blue;
color:red;
}
</style>
<body>
<form>
全体:
<input type="button" value="White" onClick="document.body.className='white'">
<input type="button" value="Gray" onClick="document.body.className='gray'">
<input type="button" value="Blue" onClick="document.body.className='blue'"><br>
テーブル1:
<input type="button" value="White" onClick="document.getElementById('t1').className='white'">
<input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'">
<input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br>
テーブル2:
<input type="button" value="White" onClick="document.getElementById('t2').className='white'">
<input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'">
<input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br>
</form>

<table width=100% id="t1">
<tr><td>test</td></tr>
</table>
<table width=100% id="t2">
<tr><td>test</td></tr>
</table>
</body>

以前、↓の質問をさせていただき解決したのですが、
input type="image" にしたいのですが、
ただ変更するだけでは、できません。
http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911

どのように変更したらいいでしょうか?
教えてください!

現在下記の方法でやっています。
<style type="text/css">
.white{
background-Color:white;
color:black;
}
.gray{
background-Color:gray;
color:yellow;
}
.blue{
background-Color:blue;
color:red;
}
</style>
<body>
<form>
全体:
<inp...続きを読む

Aベストアンサー

type=imageを諦めたのは賢明かもしれません。

>指マークにするのって、
><a>タグで囲うしかないでしょうか?

とりあえずアンカーをつかうならこんな感じで
borderを消してやるといいでしょう。
<a href="#" onClick="document.body.className='white';"><img border=0 src="1.jpg"></a>

ブラウザによって仕様がことなりますが、
強制的にカーソルを書き換えることもできます。
<img src="1.jpg" onClick="document.body.className='white';" style="cursor:hand;">

IEでは有効ですが、FFとかではダメみたいですね

QForm送信ボタンのダブルクリック防止処理で不思議な現象

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

Perl(CGI)でHTMLタグを書いてフォームを作っています。
送信(submit)ボタンをダブルクリックする人が多く、それを防止するために色々探していたら

<input type="button" value="送信" onClick="this.disabled=true; this.value='送信中'; this.form.submit();">

とすればよいとあったので早速 onClickを付け加え typeのところをsubmitからbuttonに変更しました。
そうするとうまくいったのですが、別のページを同じようにすると動きません。


よく見るとうまくいったものにはnameが入っており、実際に...続きを読む

Aベストアンサー

こんにちは

どちらでも動きますが・・・
<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>の外にボタンを配置している
・どこか記述ミスをしている
のどちらかだと思うのですが・・・

こんにちは

どちらでも動きますが・・・
<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">を無効化しているからです

今うまくいっていると思われているものの流れは...続きを読む

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化したほうが、可読性が高くなると
思います。

Qsubmitするとなぜか2度実行する

以下のようなコーディングすると、IE6では2度POST?しているように見えます。Netscape7.1では、1度実行です。なぜ、IE6で2度実行?

<INPUT type="submit" value=" 登録 " onclick="submit();">

function submit() {
document.forms['sisaku'].test.value = "OK";
document.forms['sisaku'].submit();
}

Aベストアンサー

ボタンのタイプをsubmitにすると、押した時点で送信、更にonclickでsubmit();を呼んでるので2度送信してるんじゃないでしょうか?

それと、function名のsubmitは良くないんじゃないでしょうか。もともと、submitというメソッドがあるので。

input type = "button" に変更して、function名を変えたらしっかり動くと思います。

Qsubmitボタンの無効化処理について

submitボタンを押して、次の処理が重い為に再度ボタンが押されてしまい、処理が二重になっていまうので、下記のjavascriptでボタンを1度しか押せないようにしています、。

// submitボタン無効化処理
function DisableButton(b)
{
b.disabled = true;
b.value = '投稿中';
b.form.submit();
}

しかし、今度は1度しか押していないのに、最初の送信に連続して空白のデータが送信されてしまう場合があります。

javascript を消して手動で1度しかボタンを押さない時はそういった問題は起きません、ただし振出しに戻って手動で連続で押されてしまう可能性が出てきてしまいます。

以上から、上記のコードになにか不足している部分があるのではないかと考えているのですが、わかりません。

よろしくお願いいたします。

Aベストアンサー

こんにちは。

試していないので実際にどう動くかわかりませんが
<input type="submit" value="送信" onclick="DisableButton(this);">
とか呼んでいますか?
そうするとDisableButtonの中でまたformをsubmitしている気がします。

<input type="button" value="送信" onclick="DisableButton(this);">
にしてあげれば解決するかもしれません。

*type="submit"にonclickでさらにsubmitしたことが無いのでどう動くかわかりませんが、
もしtype="submit"になっているならtype="button"にして試してみてください。

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="">
を記述する等、変更先パラメータの元を用意する必要がありますのでご注意下さい

Qonclickで2個指定するには?

例えば、下記のような二つの指定があるします。

function checkd1(){
document.FORM.CHECK1.checked=true
}
function checkd2(){
document.write("テスト");
}

これをonclickで二つとも指定するということはできるのでしょうか?

<a href="#" onclick="checkd1()">ボタン</a>
<a href="#" onclick="checkd2()">ボタン2</a>

を<a href="#" onclick="checkd1(),checkd2()">ボタン</a>としても動いてくれないので、書き直すのではなく、このまま二つを指定したいのですが、どうすればよいのでしょうか?

Aベストアンサー

><a href="#" onclick="checkd1(),checkd2()">ボタン</a>

<a href="#" onclick="checkd1();checkd2()">ボタン</a>

おしいですね。
, ではなく ; なら両方の関数が呼ばれると思います。
(Firefox3とIE6で確認しました。)

なぜ ; かと言うと、
Javascriptの文法で、文の区切りは ; だからですね。

QjQueryでクリックされた要素のidを関数で取得

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.alphabet').click(function(){
function alertAlphabet(){
alert($(this).attr('id'));
};
alertAlphabet();
});
});
</script>

以下のようなソースで、クリックされた要素のidをアラートで出したいとき、class: alphabetのa要素ををクリックすると、undefinedと出ます。
関数でthisを使うと呼び出し元のことを指さないので、クリックされた要素のidは出ないということなのですが、こういった場合、クリックされた要素のidを取得して、表示したい場合はどのようにすればよいか教えてください。

[htmlソース]
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">...続きを読む

Aベストアンサー

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQueryオブジェクト
alert(obj.attr('id'));
};
</script>
</head>
<body>
<a class='alphabet' id='a' href='' onclick="return false;">A</a>
<a class='alphabet' id='b' href='' onclick="return false;">B</a>
<a class='alphabet' id='c' href='' onclick="return false;">C</a>
</body>
</html>

イベントハンドラ・匿名関数と外部関数定義のタイミングが変じゃないですか?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('.alphabet').click(function () {
// 直接指定
alert($(this).attr('id'));
// 関数経由
alertAlphabet($(this));
});
});
function alertAlphabet(obj) {
// objはjQu...続きを読む


人気Q&Aランキング

おすすめ情報