スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

page top


Submitが止まらない?
JavaScriptなんて殆ど扱ったことがないのに、サイト内検索IT用語検索を1つのFormにまとめようと、色々とやってみたのです。

理屈としてはボタンを2つ用意して、それぞれのonClickでフラグを変更し、onSubmitでフラグにあわせてactionを入れ替えればいいはずです。

ところが、検索文を入力するInputに付けるべき名前が違うんです、この2つ。そこで、hiddenにしたInputに片方の名前をつけてonSubmitでテキストをコピーしてあげることに。というのもdisabled=trueとしてあげるとそのInputは送信されないんですね。なので、フラグにあわせてどちらか片方だけを送信すれば問題解決なわけです。

ところで、Submitが止まらない件はどこにいったのでしょう。そう、ここまでに書いた解決方法に至るまでに紆余曲折がありまして、onSubmitの中でSubmitを中止させようと試みたわけです。onSubmitで呼び出した関数でfalseを返せばいいのだと、JavaScriptの解説サイトをあちこち見て思ったのですがどうも上手くいかないのです。

それでもようやくWEB相談室さんの過去ログの中に答えを見つけることが出来たのです。onsubmit="func()"と書いていたのが間違いで、正しくはonsubmit="return func()"なんですね。こうすればfuncがfalseを返すとSubmitをしないのです。

この答えにたどり着くまでに随分時間が掛かったのですが、結局Submitを止めなくても、上手くいくことが分かったのでした。
<input type="hidden" name="w">
<label for="searchword">
<input size="20" maxlength="255" type="text" 
       name="q" index="searchword">
<input type="submit" value="サイト内" onclick="n=0;">
<input type="submit" value="IT用語辞典" onclick="n=1;">
ボタンがクリックされたらformのonsubmitから関数を呼び出します。慣れていれば q という名前で送られる前に w に書き換えてあげることができるかもしれませんが、よくわからないので hidden というタイプを使うことにしました。

hiddenは表示されない要素で、追加的なデータを送信する時に使うものです。今回は、 w という名前のhidden要素と q という名前のtext要素を使いました。

onclickでセットした n の値を調べ、IT用語辞典にデータを送る場合は、q のvalueを w のvalueにコピーしておきます。

そのままだと、w と q の両方が送られてしまうのでdisabledプロパティを操作して、必要なほうだけを送るようにします。
<script type="text/javascript">
<!--
  n = 0;
  function search()
  {
    if (n==0)
    {
      document.myForm1.action = サイト内検索のURL;
      document.myForm1.w.disabled = true;
    }
    if (n==1)
    {
      document.myForm1.action = IT用語辞典のURL;
      document.myForm1.w.disabled = false;
      document.myForm1.w.value = document.myForm1.q.value;
      document.myForm1.q.disabled = true;
      document.myForm1.submit();
      document.myForm1.q.disabled = false;
      return false;
    }
  }
-->
</script>
<form name="myForm1" method="GET"
      onSubmit="return search()">
  <input type="hidden" name="w">
  <script type="text/javascript" 
          src=サイト内検索用のスクリプトファイルのURL>
  </script>
  <label for="searchword">検索:</lable>
  <input size="20" maxlength="255" type="text"
         name="q" index="searchword">
  <input type="submit" value="サイト内" onclick="n=0;">
  <input type="submit" value="IT用語辞典" onclick="n=1">
</form>

TrackBack0 Comment0 page top





管理者にだけ表示を許可する





TRACK BACK
TB*URL





Copyright © 手づくりアプリの裏側. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。