Fieds_labo1

html-フォーム送信制御

最終更新:

fieds_labo1

- view
管理者のみ編集可

「onsubmit this.onsubmit function return false」の検索結果
html-フォーム送信制御」 から 次の単語がハイライトされています :


html フォーム送信制御

IE70573013とFireFox20014での送信の違い

Enterで送信

(1)Submitボタン無しで、1個のテキストフィールドでEnter
  • IE7:テキストのValueを返す。
  • FFox2:テキストのValueを返す。
(2)(1)で隠しフィールドを1個追加して、1個目のテキストフィールドでEnter
隠しフィールド
<input type="text" name="dummy" style="position:absolute;visibility:hidden">
  • IE7:送信しない。
  • FFox2:送信しない。

Enter抑止

(1)簡単抑止、制限あり。
<form name="..." action="..." onSubmit="return false" method="POST">
ただし、ボタンnameでvalueを期待できない。標準Submitボタン参照の事。
(2)キーコード判別して抑止。(他にも例はいろいろ見つかる。大体関数になってる)
if(event.keyCode==13){
	if(window.event.srcElement.type!='submit' &&
		window.event.srcElement.type!='textarea'){
		return false;
	}
}

2重送信抑止

(1)単純抑止
onsubmit="this.onsubmit=function(){return false}"
(2)送信ボタンをdisable
送信ボタンをdisableにするので、当然その送信ボタンに定義したvalueは送られない。
別途hiddenを用意してvalueを入れる。

標準Submitボタン

(1)1フォーム内にSubmitボタン2個
  • IE7:それぞれのSubmitボタンのValueを返す。
  • FFox2:それぞれのSubmitボタンのValueを返す。
(2)(1)で、テキストフィールドでEnter
  • IE7:Value無し。NULL
  • FFox2:先に定義したSubmitボタンのValueを返す。
(3)(1)で、Actionをシャープにして、ボタン押しまたはENTER。
  • IE7:405
  • FFox2:405
(4)(1)で、隠しフィールドと onsubmit="return false;" を追加して、テキストフィールドでEnter
  • IE7:送信しない。ボタンを押しても送信しない。完全抑止。
  • FFox2:送信しない。ボタンを押しても送信しない。完全抑止。
(5)(4)で隠しフィールド無し。
  • IE7:送信しない。ボタンを押しても送信しない。完全抑止。
  • FFox2:送信しない。ボタンを押しても送信しない。完全抑止。
(6)(5)でSubmitボタンに onclick="submit();" を追加して、テキストフィールドでEnter
  • IE7:送信しない。ボタンを押すとテキスト内容を送信し、ボタンvalueは無し。
  • FFox2:テキスト内容を送信、ボタンvalueは無し。ボタンを押しても同様。
(7)Submitボタンのスタイル変更。ボタン内のvalue文字をどう消してみせるかがポイント。
style="width:300px;height:20px;background-image:url('b1.gif');
color:#ff66cc;font-size:20px;border-style:none;background-color:#ffffff;"

汎用ボタン

(1)1フォーム内に汎用ボタン2個
  • IE7:押しても何もしない。
  • FFox2:押しても何もしない。
(2)(1)で、テキストフィールドでEnter
  • IE7:Value無し。NULL
  • FFox2:Value無し。NULL
(3)(1)で、Actionをシャープにして、ボタン押しまたはENTER。
  • IE7:Enterで405
  • FFox2:Enterで405
(4)(1)で、onsubmit="return false;" を追加して、テキストフィールドでEnter
  • IE7:送信しない。ボタンを押しても送信しない。完全抑止。
  • FFox2:送信しない。ボタンを押しても送信しない。完全抑止。
(5)(4)で汎用ボタンに onclick="submit();" を追加して、テキストフィールドでEnter
  • IE7:テキストは送信、ボタンvalue無し。
  • FFox2:テキストは送信、ボタンvalue無し。

イメージボタン

イメージボタンは本来、ボタンイメージのxy座標を返すためのもの。
(1)1フォーム内にイメージボタン2個
  • IE7:ボタンvalue無し。
  • FFox2:それぞれのイメージボタンのValueを返す。
(2)(1)で、テキストフィールドでEnter
  • IE7:Value無し。NULL
  • FFox2:先に定義したSubmitボタンのValueを返す。
(3)(1)で、Actionをシャープにして、ボタン押しまたはENTER。
  • IE7:405
  • FFox2:405
(4)(1)で、隠しフィールドと onsubmit="return false;" を追加して、テキストフィールドでEnter
  • IE7:送信しない。ボタンを押しても送信しない。完全抑止。テキストフィールドでEnterを押すとカーソル枠がボタンに移動する。
  • FFox2:送信しない。ボタンを押しても送信しない。完全抑止。
(5)(4)で隠しフィールド無し。
  • IE7:送信しない。ボタンを押しても送信しない。完全抑止。(4)と違い、テキストフィールドでEnterを押してもカーソル枠がボタンに移動しない。
  • FFox2:送信しない。ボタンを押しても送信しない。完全抑止。
(6)(5)でイメージボタンに onclick="submit();" を追加して、テキストフィールドでEnter
  • IE7:送信しない。ボタンを押すとテキスト内容を送信し、ボタンvalueは無し。
  • FFox2:テキスト内容を送信、ボタンvalueは無し。ボタンを押しても同様。
(7)(6)でテキストフィールド無し。
  • IE7:ボタンを押すと送信し、ボタンvalueは無し。
  • FFox2:ボタンを押すと送信し、ボタンvalueは無し。
(8)(7)に<input type="hidden" name="dummy" value="">を追加
  • IE7:ボタンを押すと送信し、ボタンvalueは無し。
  • FFox2:ボタンを押すと送信し、ボタンvalueは無し。
(9)(8)でボタンを押すと隠しテキストに値を設定するように変更。
  • IE7:ボタンを押すと送信し、設定したテキスト内容を返す。ボタンvalueは無し。
  • FFox2:ボタンを押すと送信し、設定したテキスト内容を返す。ボタンvalueは無し。
(10)(9)で、テキストフィールドを追加してEnter =>(6)?
  • IE7:Enterでは送信しない。ボタンを押すと送信し、設定したテキスト内容を返す。
  • FFox2:Enterで送信し、先に定義したボタンの設定値を返す。ボタンを押すとボタン設定値を返す。
(11)(10)にテキストフィールドを追加して、入力フィールドを2個にし、Enter
  • IE7:Enterで送信し、先に定義したボタンの設定値を返す。ボタンを押すとボタン設定を返す。
  • FFox2:Enterで送信し、先に定義したボタンの設定値を返す。ボタンを押すとボタン設定を返す。


まとめ

  • 送信制御する場合は、form部品のボタンは使わない。画像を貼って、onclickでsubmitする。
  • 複数個のボタンによる値切替は別途hidden項目を作り、送信時に設定する。
  • Enterはガード。
  • 2重送信は保留(disableにすると逆に混乱する?)。
  • javaが無いと動かない。javaが切ってあるときは送信不可。











記事メニュー
目安箱バナー