#過去ログをあたりましたが、自分で納得いく解答がなかったので質問します。
フォームのsubmitボタンにonClickでチェッカーなどの関数を与えた場合、
submitでフォーム内容を送信するのと、onClickで指定されている関数の
どちらが先に処理されるのでしょうか。
(一応、WindowsのIE、ネスケ共々、onClickの処理の後、submitされるようではあります)
function tasikame {
(フォームの内容チェック/中略)
alert("入力されていない項目があります")
}
例えば、このような関数をonClickで起動する場合、フォームに入力されていない
項目があると、警告されます。
この時、submitはどの環境でも起動しないで終わるのでしょうか。
それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。
#分かりづらければ、補足しますのでどうぞよろしく。
No.1ベストアンサー
- 回答日時:
> 例えば、このような関数をonClickで起動する場合、フォームに入力されていない
> 項目があると、警告されます。
> この時、submitはどの環境でも起動しないで終わるのでしょうか。
> それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。
この関数の書き方だと、警告のメッセージボックスが表示され、OK を押すと、フォームの
内容は submit されます。
イベントハンドラでは、false を返すことで、本来の動作をキャンセルすることができます。
ですから、期待する(であろう)動作をするためには、
function tasikame {
//フォームの内容チェック
...
if ( フォームの内容が正しくなければ ) {
alert("入力されていない項目があります");
return false;
} else {
return true;
}
}
というような書き方になります。
解答ありがとうございます。
面倒なのでなるべく文を短くしようと思ったのですが、
やはりfalseは返した方がいいんですね。
参考になりました。
No.2
- 回答日時:
送信前の入力チェックを行うのであれば、submitボタンのonClickではなくて、FORMのonSubmitで行うべきですよ。
<FORM name="xxx" … onSubmit="return tasikame()">
このようにすることで、例えばIEで、テキストボックス内でEnterキーを押された時に、チェックを通らないで送信されることがなくなります。
ちなみに、送信される/されないは、a-kumaさんの回答の通りですので、入力チェック用の関数から true または false を返すようにしましょう。
また、呼び出し元の onSubmit="" の中でも、上記例のように、関数の戻り値をそのまま return するようにして下さい。
解答ありがとうございました。
onClickよりonSubmitの方でやるんですね。
ついつい、Enterキーの事を忘れてしまっていました。
こちらも参考にして、頑張ってみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。 2 2023/06/13 17:58
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
Javascript_submit()完了後に処理したい
JavaScript
-
onClickで関数呼出し後に、結果に応じてsubmitを実行する方法
JavaScript
-
複数のsubmitボタンで押されたボタンを取得する方法
JavaScript
-
-
4
JSPの処理の途中で、JavaScriptの処理をしたい
JavaScript
-
5
htmlでsubmit送信時、actionより前に、scriptを動作させたい
Microsoft ASP
-
6
submitボタン押下後、disabledを無効に!
JavaScript
-
7
javascriptからjavaを呼び出したい
JavaScript
-
8
[JAVA]try 内の変数を外で!?
Java
-
9
フォーム上で押されたボタンによってサーブレットの処理を変えたい
Java
-
10
ASP.NETでのメッセージ画面を出すには
Microsoft ASP
-
11
tableタグとformタグの組み合わせ
HTML・CSS
-
12
<a href=#" …>の意味を教えてください。"
HTML・CSS
-
13
hiddenのvalueの値を変えたい
JavaScript
-
14
ページ読み込み時に自動的にsubmitさせる方法
JavaScript
-
15
Viewにインデックスは張れますか?
Oracle
-
16
getElementsByNameで要素が取得できない
JavaScript
-
17
submitするとなぜか2度実行する
JavaScript
-
18
onclickで2個指定するには?
JavaScript
-
19
日本国内で郵便番号8桁があるらしいのですが、どこでしょうか?
その他(暮らし・生活・行事)
-
20
<a>タグのテキストを取得
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テキストボックス入力を半角英...
-
javascriptで入力フォームが空...
-
VBScriptで未入力のチェック(...
-
フォームから入力すると、入力...
-
Javascriptが機能せず原因が分...
-
フォームの値が0だったら空白...
-
条件により、リンク先に画面遷...
-
イベント発生時に入力待ち状態...
-
ラジオボタンによるフォームの...
-
javaでフォーム入力の確認と文...
-
javascriptで入力禁止文字をチ...
-
submit後、同じ入力欄に戻らせ...
-
return trueとreturn falseの用...
-
onClick="this.form.submit
-
<JavaScript>tableタグを入力不...
-
onchangeイベントを強制的に発...
-
追加ボタンを押した際に ok ボ...
-
正規表現で複数マッチ条件で悩...
-
テキストエリアをenterキーでフ...
-
HTMLとJavaScriptで作った表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onClickとsubmitの処理順序
-
条件により、リンク先に画面遷...
-
javascriptで入力フォームが空...
-
フォームから入力すると、入力...
-
ラジオボタンによるフォームの...
-
JSPとJavaScriptの連携について...
-
テキストフィールドに入力した...
-
日付入力欄の表示形式を自動的...
-
最初の入力を判断
-
PDFフォームで条件つき金額を表...
-
テキストボックスを無効にする...
-
URLの/以降だけを入力したいです。
-
vbsでフォームに値を入力できない
-
フォームの値が0だったら空白...
-
テキストエリア入力文字数の表...
-
VBScriptで未入力のチェック(...
-
テキストボックス入力を半角英...
-
数字の1文字目を消したい
-
Javascriptが機能せず原因が分...
-
javascriptで入力禁止文字をチ...
おすすめ情報