【JavaScript】フォームでクリックしたものによってそれぞれ異なるページに飛ばす方法

　フォームを設置した際に、ラジオボタンやチェックボックスでクリックしたものに対してそれぞれ異なるページに飛ばす…なんてこともサイトを制作する上で必要になってくる場合があります。例えば以下のようなもの。

上のようなシステムはJavaScriptを使って実装しているのですが、その方法について今回は解説したいと思います！

JavaScriptのコードはこちら

　まず、上のシステムを実装するためには以下のようなコードを記述する必要があります。

<form name="form">
<script language=javascript>
   function test(){
      objChk = form.move
      str = "";
      for(i = 0 ; i < objChk.length;i++){
      if(objChk[i].checked) str += objChk[i].value
      }

   switch(str){
      case "1":
         location.href="inputのvalue="1"を選択した時に飛ばしたいページURL";
         break;
      case "2":
         location.href="inputのvalue="2"を選択した時に飛ばしたいページURL";
         break;
      }
   }
</script>
<input type="radio" value="1" name="move"><label>ページ1に移動</label>
<input type="radio" value="2" name="move"><label>ページ2に移動</label>
<input type="button" value="ページジャンプ" onclick="test()">
</form>

上のようなコードを当てはめることでシステムを実装できます(^^)
詳しくは以下になります。

ボタンとシステムを連動させる

　まず、上のコードでいう

   function test(){
      objChk = form.move

の
function test(){
は
<input type="button" value="ページジャンプ" onclick="test()">
のonclic="test()"と連動しています。
なので、onclic="aaa()"とした場合は
function aaa(){
になる…ということですね。

　また、
objChk = form.move
のform.moveのform.は
<form name="form">
のformと連動しており、form.moveのmoveは
<input type="radio" value="1" name="move"><label>ページ1に移動</label>
のname="move"と連動します。なので、name="bbb"としたら
objChk = form.bbb
になる…ということになります。

　上の内容はシステムを動かす上では重要な部分なので、実装する際には間違えないようにしましょう。

クリックしたものによって飛ぶページを指定する

　続いてシステムの根幹となる、クリックしたラジオボタンによって飛ぶページを指定するところの解説になります。

      str = "";
      for(i = 0 ; i < objChk.length;i++){
      if(objChk[i].checked) str += objChk[i].value
      }

   switch(str){
      case "1":
         location.href="inputのvalue="1"を選択した時に飛ばしたいページURL";
         break;
      case "2":
         location.href="inputのvalue="2"を選択した時に飛ばしたいページURL";
         break;

上の中で6行目からが条件を指定する内容になるのですが、

      case "1":
         location.href="inputのvalue="1"を選択した時に飛ばしたいページURL";
         break;

このcase "1":は
<input type="radio" value="1" name="move"><label>ページ1に移動</label>
のvalue="1"と連動しています。なので、value="2"の時のものを条件指定したい場合はcase "2":となる…という訳ですね。

　このように指定することで、どのラジオボックスにチェックを入れた状態でボタンを押したかによってその条件に当てはまったページに飛ばすことができるようになる…ということになります！

【寄り道】飛ばしたいページを別タブに表示させるには？

　最後にオマケ的な感じで紹介するものとして、上の見本は同じタブに飛ばしたページが表示されるようになっていますが、時には下のようにボタンを押した時に別タブで飛ばしたいページを表示させたい場合が出てくるかと思います。

上のように別タブで飛ばしたいページを表示させたい場合には、

      case "1":
         location.href="inputのvalue="1"を選択した時に飛ばしたいページURL";
         break;

を

      case "1":
         window.open("inputのvalue="1"を選択した時に飛ばしたいページURL");
         break;

という風に
window.open("～");
と記述することで別タブで表示させれるようになります(^-^)

まとめ

　以上がクリックしたラジオボタンによって飛ばしたいページをわけるJavaScriptの構文になります。この構文は【同意する】【同意しない】などといった確認項目を設置する時にも使えるものだと思いますので、是非とも覚えておきましょう！