javascript 複数あるsubmitで条件分岐

2010/11/12

流れとして、ボタンが押されたら適当な要素(hiddenとか)に値を入れる。
次に、通常の処理をする。

ボタンが押されたら適当な要素(hiddenとか)に値を入れる

値をセットして、submitされたときの処理の準備。

  1. <form name=”getMyForm” id=”getMyForm”>
  2. <input type=”submit” name=”btn” id=”btn” value=”aaa” onClick=”setSbmt(‘aaa’)”>
  3. <input type=”submit” name=”btn” id=”btn” value=”bbb” onClick=”setSbmt(‘bbb’)”>
  4. </form>

これでsubmitされたら、setSbmt()が走る。下はsetSbmt()の中身。
内容は「name=”getMyForm”」という<form>の「name=”onbtn”」のvalueに引数を代入。

  1. function setSbmt(sVal){
  2.  document.getMyForm.onbtn.value = sVal;
  3. }

ということで「name=”onbtn”」を作ってあげる。見える必要は無いのでhiddenにしておく。
これらをまとめると下記。

  1. <script type=”text/javascript”>
  2. function setSbmt(sVal){
  3.  document.getMyForm.onbtn.value = sVal;
  4. }
  5. </script>
  6.  
  7. <form name=”getMyForm” id=”getMyForm”>
  8. <input type=”submit” name=”btn” id=”btn” value=”aaa” onClick=”setSbmt(‘aaa’)”>
  9. <input type=”submit” name=”btn” id=”btn” value=”bbb” onClick=”setSbmt(‘bbb’)”>
  10. <input type=”hidden” name=”onbtn” id=”onbtn”>
  11. </form>

通常の処理

<form>でonsubmitされたときってやれば通常の処理として扱える。

  1. <script type=”text/javascript”>
  2. function setSbmt(sVal){
  3.  document.getMyForm.onbtn.value = sVal;
  4. }
  5.  
  6. function sndSbmt(){
  7. &nsbsp;//好きな処理
  8. }
  9. </script>
  10.  
  11. <form name=”getMyForm” id=”getMyForm” action=”#” onsubmit=”sndSbmt();return false;”>
  12. onsubmit=”return sndSbmt();”としてもok。必要に応じて使い分ける
  13. <input type=”submit” name=”btn” id=”btn” value=”aaa” onClick=”setSbmt(‘aaa’)”>
  14. <input type=”submit” name=”btn” id=”btn” value=”bbb” onClick=”setSbmt(‘bbb’)”>
  15. <input type=”hidden” name=”onbtn” id=”onbtn”>
  16. </form>

新着(ニュース関連以外)

2017-08-03
formのinputでmaxlengthを使うとFirefoxでバグってた。他のブラウザでも気づかずにバグってたかもしれない。
2017-07-19
折れ線グラフをもう少しゆるやかに・・・というか何というか・・・調べていくと「移動平均」っていう言葉にたどり着いた
2017-07-10
FuelPHPの1.8をダウンロードして使っていたらセッションが使えないということに気付いた。
2017-06-27
MACにWin10をインストールしてみた:再挑戦。
2017-06-25
「簡単」っていうヤツらが多いけど・・・難しいぞ。