OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

onClickとsubmitの処理順序

  • 困ってます
  • 質問No.152401
  • 閲覧数12027
  • ありがとう数4
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 64% (71/110)

#過去ログをあたりましたが、自分で納得いく解答がなかったので質問します。

フォームのsubmitボタンにonClickでチェッカーなどの関数を与えた場合、
submitでフォーム内容を送信するのと、onClickで指定されている関数の
どちらが先に処理されるのでしょうか。
(一応、WindowsのIE、ネスケ共々、onClickの処理の後、submitされるようではあります)

function tasikame {
(フォームの内容チェック/中略)
alert("入力されていない項目があります")
}

例えば、このような関数をonClickで起動する場合、フォームに入力されていない
項目があると、警告されます。
この時、submitはどの環境でも起動しないで終わるのでしょうか。
それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。

#分かりづらければ、補足しますのでどうぞよろしく。
通報する
  • 回答数2
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.1
レベル14

ベストアンサー率 50% (1122/2211)

> 例えば、このような関数をonClickで起動する場合、フォームに入力されていない
> 項目があると、警告されます。
> この時、submitはどの環境でも起動しないで終わるのでしょうか。
> それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。

この関数の書き方だと、警告のメッセージボックスが表示され、OK を押すと、フォームの
内容は submit されます。

イベントハンドラでは、false を返すことで、本来の動作をキャンセルすることができます。
ですから、期待する(であろう)動作をするためには、

function tasikame {
 //フォームの内容チェック
  ...

 if ( フォームの内容が正しくなければ ) {
  alert("入力されていない項目があります");
  return false;
 } else {
  return true;
 }
}

というような書き方になります。
お礼コメント
dai-39

お礼率 64% (71/110)

解答ありがとうございます。
面倒なのでなるべく文を短くしようと思ったのですが、
やはりfalseは返した方がいいんですね。
参考になりました。
投稿日時 - 2001-10-21 00:18:39
-PR-
-PR-

その他の回答 (全1件)

  • 回答No.2
レベル12

ベストアンサー率 75% (398/526)

送信前の入力チェックを行うのであれば、submitボタンのonClickではなくて、FORMのonSubmitで行うべきですよ。   <FORM name="xxx" … onSubmit="return tasikame()"> このようにすることで、例えばIEで、テキストボックス内でEnterキーを押された時に、チェックを通らないで送信さ ...続きを読む
送信前の入力チェックを行うのであれば、submitボタンのonClickではなくて、FORMのonSubmitで行うべきですよ。

  <FORM name="xxx" … onSubmit="return tasikame()">

このようにすることで、例えばIEで、テキストボックス内でEnterキーを押された時に、チェックを通らないで送信されることがなくなります。

ちなみに、送信される/されないは、a-kumaさんの回答の通りですので、入力チェック用の関数から true または false を返すようにしましょう。
また、呼び出し元の onSubmit="" の中でも、上記例のように、関数の戻り値をそのまま return するようにして下さい。
お礼コメント
dai-39

お礼率 64% (71/110)

解答ありがとうございました。
onClickよりonSubmitの方でやるんですね。
ついつい、Enterキーの事を忘れてしまっていました。
こちらも参考にして、頑張ってみます。
投稿日時 - 2001-10-21 00:21:00


このQ&Aのテーマ
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ