Form Button

Form にボタンを並べる

Form にボタンを並べてクリックで石の数を選択します。

【Source Code】

<title>Form Button</title>
<script type="text/javascript">
  function ImgView(num)
  { for(i=0; i<num; i++)
      document.write("<img src='img/jewel.gif'>");
  }
</script>
</head>

<body>
<h2>Form にボタンを並べる</h2>
<h3>Form にボタンを並べてクリックで石の数を選択します。</h3>
<form action="form_button.html" method="get">
<script type="text/javascript">
    for(i=1; i<8; i++)
    {   document.write('<input type=radio name="val" value=',i,'/>',i,' 個<br>');
    }
</script>
<input type="submit" value="送信" />
</form>

<script type="text/javascript">
    param = new Array();
    if (window.location.search.length>4)
    {   var query = window.location.search.substring(1);
        var parameters = query.split('&');
        for(i=0; i<parameters.length; i++)
        {
            var element = parameters[i].split('=');
            var paramName = decodeURIComponent(element[0]);
            var paramValue = decodeURIComponent(element[1]);
            param[paramName] = parseInt(paramValue);
        }
        val = param["val"];
        ImgView(val);
    }
</script>

Form にボタンを並べてクリックで石の数を選択します。

<body>
<h2>Form にボタンを並べる</h2>
<h3>Form にボタンを並べてクリックで石の数を選択します。</h3>
<form action="form_button.html" method="get">
<script type="text/javascript">
    for(i=1; i<8; i++)
    {   document.write('<input type=radio name="val" value=',i,'/>',i,' 個<br>');
    }
</script>
<input type="submit" value="送信" />
</form>

パラメータが渡されたとき "val" を受け取って ImgView(val); で石を表示します。
window.location.search が 4 文字以上の時、パラメータを受け取ります。
val = param["val"]; でクリックされたボタンの番号を取得します。

<script type="text/javascript">
    param = new Array();
    if (window.location.search.length>4)
    {   var query = window.location.search.substring(1);
        var parameters = query.split('&');
        for(i=0; i<parameters.length; i++)
        {
            var element = parameters[i].split('=');
            var paramName = decodeURIComponent(element[0]);
            var paramValue = decodeURIComponent(element[1]);
            param[paramName] = parseInt(paramValue);
        }
        val = param["val"];
        ImgView(val);
    }
</script>

石を表示する ImgView(); 関数は head の中で定義しています。

<title>Form Button</title>
<script type="text/javascript">
  function ImgView(num)
  { for(i=0; i<num; i++)
      document.write("<img src='img/jewel.gif'>");
  }
</script>
</head>

前田稔の超初心者のプログラム入門
 超初心者のプログラム入門(JavaScript)