アトム-サイト
[ アトム-サイト ] - 管理人さんのページです。
feed-icon RSS2.0   feed-icon Atom
[ javascript ] 一覧へ
formでのENTERキーと多重送信
管理人さんのブログ 2008-02-29 12:58:35

 とても不思議な現象…。
====
print "<form action="addcomment.html" method="post">n";
print "<input type="text" />n";
print "<input type="button" value="test" onclick="this.disabled=true;this.form.submit();" />n";
print "</form>n";
====
 これで<input type="text"のとこでのエンターキーがsubmitされてしまう。
 (しかも、どのブラウザでも同じ挙動)
 実はこれ、<input type="text"の次に
 <input type="text" />をもう一つ書いてやると起こらない…。
 (passwordでもよかった。ボタン系やtextareaではダメ)
 今までいくつかの入力があったから気付かなかった。
 (一つの入力の場合はformが勝手にsubmitするのかな?)
 で、解決方法は、
====
print "<script LANGUAGE=JavaScript>n";
print "<!--n";
print "var clicked=false;n";
print "// --></script>";

print "<form action="addcomment.html" method="post" onSubmit="return clicked;">n";
print "<input type="text" />n";
print "<input type="reset" />n";
print "<input type="button" value="test" onclick="clicked=true;this.form.submit();" />n";
print "</form>n";
====
↑「エンターキー無効」とかで調べると、こんなのが検索して出てきた…。

フォームがsubmitしないようにして、ボタンクリックした時だけだから、こうかな?
====
print "<form action="addcomment.html" method="post" onsubmit="return false;">n";
print "<input type="text" />n";
print "<input type="reset" />n";
print "<input type="button" value="test" onclick="this.disabled=true;this.form.submit();" />n";
print "</form>n";
====
 よし、キチンと動いた。

ポイントは
・formタグに、onsubmit="return false;"を入れて通常のsubmitを無効化
・inputタグのtypeがsubmitでなくてbutton
・this.disabled=true;はクリックされた瞬間無効にして多重送信をさせない

あと、確認ダイアログを入れるのはonclickの所で、
if(window.confirm('よろしい?')){Cal.disabled=true;Cal.form.submit();}
とするだけ。

ちなみにこの方法では、
<input type="button" name="hoge" id="hoge"での『hoge』がPOSTされないので、数種類のボタンを使ってる場合には注意。

~~~~

javascriptを使って色々やりつつあります。
他の記事もどうぞ…。

※ 『javascript』に繋がる関連物を 視覚的に探しだせるサイトを作ってみました(よろしければクリックしてみてくださいね)。

 コメント記入者:

 リンク元:
(2) : http://www.google.co.jp/search?hl=ja&q=form+enter+%E7%84%A1%E5%8A%B9&sourceid=navclient-ff&rlz=1B6_____jaJP349JP350&ie=UTF-8&aq=1&oq=form+enter
(1) : http://search.yahoo.co.jp/search?p=javascript+text+enter&ei=UTF-8&fr=top_ga1_sa&x=wrt
(1) : http://www.google.co.jp/search?hl=ja&lr=&q=javascript+form+post&start=10&sa=N
(1) : http://www.google.co.jp/search?hl=ja&q=javascript+%E3%82%A8%E3%83%B3%E3%82%BF%E3%83%BC%E3%82%AD%E3%83%BC+%E7%84%A1%E5%8A%B9+%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0&lr=&aq=f&oq=
(1) : http://www.google.co.jp/search?hl=ja&lr=&client=firefox-a&channel=s&rls=org.mozilla:ja:official&hs=ess&q=Enter%E3%80%80Submit%E3%80%80MAC&start=10&sa=N
(1) : http://www.google.co.jp/search?sourceid=navclient&aq=2&oq=form+enter&hl=ja&ie=UTF-8&rlz=1T4ADBF_jaJP278JP280&q=form+enter%e3%82%ad%e3%83%bc+%e7%84%a1%e5%8a%b9
(1) : http://search.yahoo.co.jp/search?p=javascript+form+%E9%80%81%E4%BF%A1&ei=UTF-8&fr=top_ga1_sa&x=wrt
(1) : http://www.google.co.jp/search?q=form+action+Enter%E3%82%AD%E3%83%BC&btnG=%E6%A4%9C%E7%B4%A2&hl=ja&lr=&sa=2
(1) : http://www.google.co.jp/search?q=javascript+onclick+%E3%82%AD%E3%83%BC&lr=lang_ja&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&client=firefox
(1) : http://www.google.com/search?q=form+onsubmit+13+enter&btnG=%E6%A4%9C%E7%B4%A2&hl=ja&lr=lang_ja&client=safari&rls=en&sa=2

 ページ閲覧者数:70人

[ javascript ] 一覧へ


<< 2009年11月
2009年11月22日(日)
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

 最近の書き込み

パソコンショップ
  <2009-11-21 06:56:01>
ネットコマンド
  <2009-11-20 10:30:10>
Linuxコマンド
  <2009-11-18 11:44:56>
家のパソコン
  <2009-11-17 17:25:58>
ROUND 1 (豊橋)
  <2009-11-17 07:49:50>
nPOPs
  <2009-11-15 07:40:23>
打ちっぱなし
  <2009-11-13 15:21:35>
胃カメラ
  <2009-11-13 15:10:33>
T-01A
  <2009-11-13 10:02:41>
画面キャプチャ
  <2009-11-13 07:01:33>


 カテゴリー

おでかけ(67)
サッカー(41)
季節(32)
食べ物(30)
旅(28)
家(28)
映画(26)
地元(25)
DIY(24)
家族(21)
学校(20)
モバイル(20)
生物(20)
健康(19)
Web(17)
風景(17)
ドラマ(17)
通勤(16)
ブログ(14)
Winアプリ(14)
家電(13)
ゲーム(12)
足技(12)
ブラウザ(11)
本(11)
ゴルフ(10)
自転車(10)
Linux(10)
php(9)
javascript(9)
 ・ 連想検索
 ・ GoogleMaps風
 ・ GETリクエストを得る
 ・ Ajax多重通信
 ・ 画像検索
 ・ 3D空間
 ・ formでのENTERキーと多重送信
 ・ Ajax suggest
 ・ textarea カーソル位置文字列挿入
PCハード(9)
ネットワーク(8)
飲み物(8)
会社(8)
感銘映像(6)
税金(5)
空想(5)
VMware(4)
Ruby(4)
データベース(3)
perl(1)