• ベストアンサー

onClickとsubmitの処理順序

#過去ログをあたりましたが、自分で納得いく解答がなかったので質問します。 フォームのsubmitボタンにonClickでチェッカーなどの関数を与えた場合、 submitでフォーム内容を送信するのと、onClickで指定されている関数の どちらが先に処理されるのでしょうか。 (一応、WindowsのIE、ネスケ共々、onClickの処理の後、submitされるようではあります) function tasikame { (フォームの内容チェック/中略) alert("入力されていない項目があります") } 例えば、このような関数をonClickで起動する場合、フォームに入力されていない 項目があると、警告されます。 この時、submitはどの環境でも起動しないで終わるのでしょうか。 それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。 #分かりづらければ、補足しますのでどうぞよろしく。

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

  • ベストアンサー
  • a-kuma
  • ベストアンサー率50% (1122/2211)
回答No.1

> 例えば、このような関数をonClickで起動する場合、フォームに入力されていない > 項目があると、警告されます。 > この時、submitはどの環境でも起動しないで終わるのでしょうか。 > それとも警告が起動した後、フォーム内容はsubmitされてしまうのでしょうか。 この関数の書き方だと、警告のメッセージボックスが表示され、OK を押すと、フォームの 内容は submit されます。 イベントハンドラでは、false を返すことで、本来の動作をキャンセルすることができます。 ですから、期待する(であろう)動作をするためには、 function tasikame {  //フォームの内容チェック   ...  if ( フォームの内容が正しくなければ ) {   alert("入力されていない項目があります");   return false;  } else {   return true;  } } というような書き方になります。

dai-39
質問者

お礼

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

その他の回答 (1)

  • leaz024
  • ベストアンサー率75% (398/526)
回答No.2

送信前の入力チェックを行うのであれば、submitボタンのonClickではなくて、FORMのonSubmitで行うべきですよ。   <FORM name="xxx" … onSubmit="return tasikame()"> このようにすることで、例えばIEで、テキストボックス内でEnterキーを押された時に、チェックを通らないで送信されることがなくなります。 ちなみに、送信される/されないは、a-kumaさんの回答の通りですので、入力チェック用の関数から true または false を返すようにしましょう。 また、呼び出し元の onSubmit="" の中でも、上記例のように、関数の戻り値をそのまま return するようにして下さい。

dai-39
質問者

お礼

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

関連するQ&A

  • phpのsubmit処理について

    phpのsubmit処理について不明点があります 実装したいことは ボタンを押したらフォームの入力内容を別フォームに表示したいのですが 別フォームに呼び出しはできたのですが ボタン押下時にsubmitで表示するかの確認をしたいです 現段階ではボタンを押すと確認アラートも出ず、ただ別フォームが表示される形になってしまいます <--関数--> function showData(){ myRet = confirm("表示しますか") if (myRet == true){ } } <--form--> <form name = "FileData" action = "show.php" method="POST"> <--button--> <input type = "submit" name ="Display" onClick "showData();" value="表示"> ソースの抜粋になります これで実行するとshow.phpが呼ばれて表示はされるのですが関数が呼ばれず確認アラートも呼ばれません すぐ実行されるというものになっていますます この現象の原因と何か解決などわかることがあればよろしくお願いします。

    • ベストアンサー
    • PHP
  • onClick="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>

  • onClickで関数呼出し後に、結果に応じて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で実現したいと 考えております。

  • Macでのform-submitの動作

    いつもお世話になっています。 formのsubmitを押された際に、内容のチェックを行い、記入ミスがあれば、アラートで警告をだし、元のページに戻る処理を作ったのですが WinIe5だと、入力した項目はそのままですが、MacIe5だと、リロードされてしまい、入力した項目が消えてしまいます。 ソースは -----HTML----- <form name="myform" onsubmit="return check();"> :::::input の radioやselect等 ::::::: <input type="submit" value="送信"> </form> ------JS------ function check(){ if(内容が全て入力されている場合){ return true; } else{//入力されてない項目がある場合 alert("全ての項目を入力して下さい。"); return false; } } と、しています。 returnを消してみたり、locationを居れてみたりしたのですが、Macだと、リロードされてしまいます。 これは、MacIeの仕様なのでしょうか?それとも、環境設定で治るのでしょうか? (私は、Macには、詳しくありません。) 回避方法など教えていただければ、助かります。よろしくお願いします。

  • submitボタンのアラートを閉じても送信されてしまう

    初歩的な質問で恐縮です。 PHPでメールフォームを作っています。 submitを押した時に「送信してよろしいですか?」というアラートを出しているのですが、このアラートを閉じても(右上の「×」を押しても)送信されてしまいます。 ユーザーがやっぱり送信をやめたくても、submitを押してしまったら回避できないという状況です。 運用が迫っているため急ぎですが、ご教授いただけないでしょうか。 ボタンのソースはこちらです。 なお、<form>にonSubmitで記述した場合も同じでした。 <input type="submit" onClick="javascript:alert('こちらの内容で送信します。よろしいですか?')" value=" 送 信 "> ちなみに、内容チェックは送信されてから行っていますので、ここでは単純にアラートを出すだけです。 よろしくお願いします。

    • ベストアンサー
    • PHP
  • submitがおされた同時に JavaScript の処理は可能?

    質問のとおりですが、 <script>   function push(){    ★処理内容   } <script> <from action="/test/servlet/sample" method="post"> <input type="submit" valeu="ボタン" onclick="push()"> </from> でこの時 submit が押されたと同時にJavaScriptの処理も一緒に実行させたいのですが、可能でしょうか? ★の処理内容はsubmitボタンを1回押したらまたもう一回submitボタンを押されたようにする。つまりボタンを1回押したら2回分押したことと同じようにする。 とこんなかんじの処理なんですが…。 アドバイスお願いします。

  • submit();submit()--複数リクエスト発行の仕様は?

    submit()を連続して起動したときの動作について調べています。下例ではいずれも3回リクエストが発行されると理解していますが、現在のところ、ブラウザやタイミングによって、発行される回数が1~3の間で変化するように見受けられます。動作に関する仕様の記述についてご存じの出典がありましたら、お教えください。 ■調査内容 ・ブラウザにより動作が変わるのか? ・Script内部処理状況によってsubmit処理がスルーされるのか? ・国際標準仕様やベンダー毎の仕様はどのように定義されているか? ■記述例 <input type="submit" value="Foo" onClick="submit();submit()" > <input type="button" value="Bar" onClick="submit();submit();submit()" > ★リクエストの内容・宛先は全て同じとお考えください。 ☆WEBコンテナのマルチスレッド・スレッドセーフの動作テストに利用できるかという視点で調べています。  

  • html5でrequiredが機能しない

    <input type="submit" value="ボタン" onclick="関数名" /> 上は入力フォーム用の送信ボタンなのでクリックと同時に 関数が機能するようになっています。 ただ、この状態だと入力フォームにrequiredがあり、 空の状態など間違った内容でも送信ボタンを押すと、 onclickの内容が実行されてしまいます。 onclickを外せば正常にフォームチェックしてくれます。 onclickがある状態でもフォームチェックするにはどうしたら 良いのでしょうか?

    • ベストアンサー
    • HTML
  • フォームでEnterを押してもsubmitさせない

    現在製作中のサイトで、ajaxで処理を行うため、フォームでEnterキーを押しても通常のsubmitをさせずに、別途処理を関数で呼び出すようにしています(下記参照)。 チェックしたほとんどのブラウザでは思い通りの動作なのですが、IE8(他のIEは未テスト)で、同じページに別のフォーム(こちらのフォームはEnterでsubmitさせています)があるページのみ、submitされてしまいます。(ajax_submit()も実行されます) 小さな可能性でもかまいません。お心当たりがございましたらお助けください。 ▼HTML <form method="get" action="">  <input id="s" type="text" value="" onKeyPress="return submitStop(event);" />  <p id="search_sbm" onclick="ajax_submit();">検索</p> </form> ▼JavaScript function submitStop(e){  if (!e) var e = window.event;  if(e.keyCode == 13) {   ajax_submit();   return false;  } }

  • 入力項目をアドレス欄に反映したい。

    Javaとの連携(JSP)です。 入力項目を受け取り、アドレス欄にその入力項目を表示したいのですが… function Search(var moji){ alert(moji); DoAdr(Submit(), '/Search?CATEGORY=moji'); } DoAdrはsubmitボタンを押されたとき遷移するURLを決定する関数で、 例えば、DoAdr(Submit(),'/Search?CATEGORY=1') と入力されていた場合、 Submitを押すと、 http://~(中略)/Search?CATEGORY=1 に遷移します。 入力された文字列をmojiに格納するところまではできていますが、 [alert(moji);で正しく文字列が表示される] アドレス欄にhttp://~(中略)~/Search?CATEGORY=moji と そのまま表示されてしまいます。 変数の中身をアドレス欄に表示する方法を教えてください。お願いします。