#過去ログをあたりましたが、自分で納得いく解答がなかったので質問します。
フォームの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も見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
onClickで関数呼出し後に、結果に応じてsubmitを実行する方法
JavaScript
-
Javascript_submit()完了後に処理したい
JavaScript
-
複数のsubmitボタンで押されたボタンを取得する方法
JavaScript
-
-
4
tableタグとformタグの組み合わせ
HTML・CSS
-
5
submitするとなぜか2度実行する
JavaScript
-
6
getElementsByNameで要素が取得できない
JavaScript
-
7
htmlでsubmit送信時、actionより前に、scriptを動作させたい
Microsoft ASP
-
8
hiddenのvalueの値を変えたい
JavaScript
-
9
<TD><input type=text"></TD>でテキストボックスとセルの間にわずかな隙間があいてしまう・・"
HTML・CSS
-
10
ページ読み込み時に自動的にsubmitさせる方法
JavaScript
-
11
submitボタン押下後、disabledを無効に!
JavaScript
-
12
「マスタ」と「テーブル」の違いとはなんでしょうか?
Oracle
-
13
日本国内で郵便番号8桁があるらしいのですが、どこでしょうか?
その他(暮らし・生活・行事)
-
14
functionから別のfunctionを実行したい
JavaScript
-
15
onclickで2個指定するには?
JavaScript
-
16
onclickが動作しない
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onClickとsubmitの処理順序
-
javascriptで入力禁止文字をチ...
-
dijit.form.ComboBoxについて
-
イベント発生時に入力待ち状態...
-
テキストボックスを無効にする...
-
AjaxのWYSIWYGエディタ
-
return trueとreturn falseの用...
-
プルダウン選択を変更すると、...
-
slickのレスポンシブ > center...
-
FormのonsubmitでJavaスクリプ...
-
onchangeイベントを強制的に発...
-
submitがおされた同時に JavaSc...
-
select要素のvalueを配列で取得...
-
Selectボックスの幅を自動で広...
-
HTMLファイル同士での値渡し
-
ラジオボタンの値でリンク先を...
-
ラジオボタンとプルダウンを連...
-
Selectの中身をfor文で入れる
-
JQuery selectが反映されない
-
確認ページからフォームページ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
onClickとsubmitの処理順序
-
JSPとJavaScriptの連携について...
-
ラジオボタンによるフォームの...
-
テキストボックス入力を半角英...
-
onChange()メソッド
-
フォームから入力すると、入力...
-
テキストボックスを無効にする...
-
フォームの値が0だったら空白...
-
文末の改行コードを削除したい
-
キーボードの数字のキーだけを...
-
テキストボックスのグレーアウト
-
javaでフォーム入力の確認と文...
-
フィールドを有効(enabled?)に...
-
JavaScript のプログラム質問で...
-
Javascript 郵便番号の入力欄で...
-
イベント発生時に入力待ち状態...
-
フォームのテキストをリンク化...
-
貼り付けイベントで値を取得したい
-
メールフォームの入力確認用Jav...
-
dijit.form.ComboBoxについて
おすすめ情報