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

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

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

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

#分かりづらければ、補足しますのでどうぞよろしく。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

> 例えば、このような関数をonClickで起動する場合、フォームに入力されていない


> 項目があると、警告されます。
> この時、submitはどの環境でも起動しないで終わるのでしょうか。
> それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。

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

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

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

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

というような書き方になります。
    • good
    • 0
この回答へのお礼

解答ありがとうございます。
面倒なのでなるべく文を短くしようと思ったのですが、
やはりfalseは返した方がいいんですね。
参考になりました。

お礼日時:2001/10/21 00:18

送信前の入力チェックを行うのであれば、submitボタンのonClickではなくて、FORMのonSubmitで行うべきですよ。



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

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

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

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

お礼日時:2001/10/21 00:21

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QonClickで関数呼出し後に、結果に応じてsubmitを実行する方法

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しません・・・
onClick部分にonClick="return func(),submit();"と記述した場合、
func関数の実行結果がtrueでもfalseでも遷移してしまいます。
そこで、なんとなくonClick="return func()&&submit();"と記述してみたところ、
func関数がtrueの時のみうまく遷移するようになりました。

これは偶然そう動作しているのでしょうか、それとも上記は正しい記述方法なのでしょうか?
正しい記述方法ならいいのですが、上記以外に正式な記述方法があれば
教えていただけないでしょうか?

※TYPE="submit"にすればいいとは思うのですが、buttonで実現したいと
考えております。

JavaScriptで、
function func() {
 if (a==0) {
  alert("処理しない");
  return false;
 }
 return true;
}
と、a=0ならfalseを返し、それ以外ならtrueを返す関数を定義しています。

そして、FORMタグで
<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="return func();submit();">
</FORM>
と記述しています。
要は、ボタンを押下した際にfunc関数がtrueを返せば、next.htmlに
遷移させたいのですが、上記記述では、遷移しませ...続きを読む

Aベストアンサー

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右式を結果とする演算子です。よって、funcメソッド、submitメソッド両方を評価するため、funcメソッドの戻り値に関係なく、submitされます。

3.&&で区切った場合、
論理演算子「&&」は、左右ともにtrue(0以外)の場合のみtrueとする演算子です。また、2項論理演算子は左式から評価し、左式だけで全体の結果がわかる場合、右式を評価しません。よって、funcメソッドがfalseを戻した場合、その時点でsubmitを評価しなくても演算結果は必ずfalseとなるのでそこで打ち切られ、trueを戻した場合、submitを評価しないと演算結果を得られないため、遷移したわけです。「&&」を「||(論理和)」に変更すると逆の結果得たと思います。

さて、では3の「&&」が正しいかと言われたら、文法上は正しいです。ただし、他人がみてわかるとは思えません。
そこで、以下の記述はいかがでしょう。読んでみてソースを理解できますか。


<FORM NAME="FormName" ACTION="next.html">
<INPUT TYPE="button" VALUE="next" NAME="button1" onClick="func()">
</FORM>

(中略)

// funcの定義
function func() {
 if (a==0) {
  alert("処理しない");
  return ;
 }
 document.FormName.submit();
}

要は、ボタンを押されたら、funcを呼び出せ。
funcでは、aが0ならば、そこで終了しろ。
そうでなければ、documentオブジェクト内のFormNameと言う名前のオブジェクトのsubmitメソッドを呼べ。
です。

3つのパターンをみる限り、理由は以下の通りと思います。
1.セミコロン(;)で区切った場合、
この場合、「return func();」と「submit();」とは別の文です。returnはその時点の値を戻して、それ以降の動作を打ち切ってしまいます。よって、onClickイベントはfuncメソッドの戻り値(true/false関係なく)を戻して、そこで終了、それ以降のsubmitは実行しないとなります。

2.カンマ(,)で区切った場合、
この場合、「return func(),submit();」が1つの文となります。この「,」は、左右の式を評価して、右...続きを読む

Q1つのフォーム内容を1つのsubmitで複数ページに同時送信

tomcat5.0+mysql5.1+jsp+html

まったく同じフォーム内容を2つのページに送信しようとしています。
center.jsp内にあるひとつのsubmitボタンを押して、同時に2つのページでデータを受け取りたいのです。
どなたかわかるかたいらっしゃいますでしょうか?

center.jsp → rightA.jsp
      → leftB.jsp

フレーム分割しているので、イメージ的には下記のような感じです。
action='rightA.jsp' method='post' target='rightA'
action='leftB.jsp' method='post' target='leftB'


※javascriptで可能だと知り合いから聞いたのでいろいろ調べてみましたが…
 いまいちjavascriptが理解できないでいます。

<script language="JavaScript">
<!--

function sendForm() {

formElem.method = "post";
formElem.action = "rightA.jsp";
formElem.target = "rightA";
              
formElem.action = "leftB.jsp";
formElem.target = "leftB";

 ~

}
// -->
</script>

<form name='form' action='' onsubmit='retrun sendForm()'> ~
          

tomcat5.0+mysql5.1+jsp+html

まったく同じフォーム内容を2つのページに送信しようとしています。
center.jsp内にあるひとつのsubmitボタンを押して、同時に2つのページでデータを受け取りたいのです。
どなたかわかるかたいらっしゃいますでしょうか?

center.jsp → rightA.jsp
      → leftB.jsp

フレーム分割しているので、イメージ的には下記のような感じです。
action='rightA.jsp' method='post' target='rightA'
action='leftB.jsp' method='post' target='leftB'


※javascript...続きを読む

Aベストアンサー

まず前提として、1つのページから2以上のページに飛ぶことは
一意性が失われるため、お勧めできません。
特にtargetを指定してページを開くことは非推奨のはずです。
それでもどうしてもというのであれば以下のように・・・

formElem.action = "rightA.jsp";
formElem.target = "rightA";
formElem.submit();          
formElem.action = "leftB.jsp";
formElem.target = "leftB";
formElem.submit();          
return false;

と、actionとtargetを指定した後にsubmitしてやり、最後にfalseを
返してやるとよいでしょう。(onsubmitにfalseが返るため)

Q複数のfunctionをonclickで実行するには?

こんばんは。
複数のfunctionを実行するにはどうしたらいいんでしょうか?
後、追加でなんですが、areaにhref属性を使わず(#を指定すると、ページの上に戻ってしまうため)にポインタを指(リンクに乗せたときのやつです)にするにはどうすればいいんでしょうか?

インラインフレーム1
<script>
<!--
function change1(picname) {
parent.frames['インラインフレーム2'].document.getElementById("ID1").src = picname;
}
function change2(picname) {
parent.frames['インラインフレーム2'].document.getElementById("ID2").src = picname;
}
・・・
function change3(picname) {
parent.frames['インラインフレーム2'].document.getElementById("ID8").src = picname;
}
//-->
</script>
上のfunctionを複数実行したいんです。(全てではありません)
<map name="">
<area shape="rect" coords="0,0,0,0" alt="" onclick="change1('ファイル')">
・・・
<area shape="rect" coords="0,0,0,0" alt="" onclick="change8('ファイル')">
</map>

インラインフレーム2
<div style="position: absolute; top: 0px; left: 0px; z-index: 0;"><img src="ファイル" id=ID1 alt="" border="0"></div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 1;"><img src="ファイル" id=ID2 alt="" border="0"></div>
<div style="position: absolute; top: 0px; left: 0px; z-index: 2;"><img src="ファイル" id=ID3 alt="" border="0"></div>
・・・
<div style="position: absolute; top: 0px; left: 0px; z-index: 8;"><img src="ファイル" id=ID8="0"></div>
どうでしょう?
自分なりに試してみたんですが、成功しませんでした。(onclickにいっぱいくっつけたりとか・・・)
どうかお願いします。

こんばんは。
複数のfunctionを実行するにはどうしたらいいんでしょうか?
後、追加でなんですが、areaにhref属性を使わず(#を指定すると、ページの上に戻ってしまうため)にポインタを指(リンクに乗せたときのやつです)にするにはどうすればいいんでしょうか?

インラインフレーム1
<script>
<!--
function change1(picname) {
parent.frames['インラインフレーム2'].document.getElementById("ID1").src = picname;
}
function change2(picname) {
parent.frames['インラインフレーム...続きを読む

Aベストアンサー

簡単にするために、まず、functionもまとめてしまいましょう。
現状では、画像のファイルパスが引数になっていますが、変更するエレメントの指定も引数にしてしまえば、以下のひとつで済んでしまいます。
function change0(idn.picname){
parent.frames['インラインフレーム2'].document.getElementById(idn).src = picname;
}
呼び出す側は onclick="change0('ID1','ファイル')" などとなります。

処理を2種類以上行いたい場合は、
 onclick="change0('ID1','ファイル1'); change0('ID2','ファイル2');"
などのようにしてあげればよいです。

他にもいろいろ方法は考えられるけれど、一例です。
(関係ないけど、質問文はいろんなところが全角文字だけど、
 それは質問文用ということですよね?)

Q送信ボタンをbuttonに変えてonclickでsubmitがうまくいきません

宜しく御願いします。
enterキーでの誤送信を防ごうと過去ログをみてそのとおりにフォームのsubmitをfalseで返し、送信ボタンをbuttonにかえてタイトルのようにjavascriptで送信しようとしたのですが「ページでエラーが発生しました」と画面下のステータスバー(?)に表示され、うまくいきません。どなたか御教授ください。ちなみにページはPHPで書いており、フレームを使用しております。
若しくは別の方法でenterキー入力を回避できる方法があれば教えてください。(onfocus以外で)

Aベストアンサー

#2です

しつれいしました。1点見逃してました
buttonの名前に「submit」はつかえません。
「submit1」とか適当な名前にしてみてください

QonClick="this.form.submit

・下記のようなformがあるのですが、 onClick="this.form.submit();" disabledの意味を教えてください
・クリックしたら、このフォーム内容を送信?
・アクション先も指定していないのに、処理はどこへいくのでしょうか?
・また、disabledは? ずっと押せない?
<form name="hoge" method="POST">
<input name="hoge" type="button" class="button" value="piyo" onClick="this.form.submit();" disabled>
</form>

Aベストアンサー

>・クリックしたら、このフォーム内容を送信?
うん、this.form.submit();はこのフォームをsubmitとそのまま解釈すれば良い。

>・アクション先も指定していないのに、処理はどこへいくのでしょうか?
これはactionの指定が無ければ自身に送信。パラメータを送信しつつリロードみたいな動き。

>また、disabledは? ずっと押せない?
これは二回クリックされることを回避させている。
表示されているページがボタンをクリックするとリロードされるから一瞬押せなくなるけどまたパラメータ送信後、ページが表示されたときはまた押せる状態になっている。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報