フォームデータの取得時に複数のパラメータを扱う

JavaScript Market - 動きのあるホームページを作る為の各種JavaScript のサンプルと小技集を公開中

フォームデータの取得時に複数のパラメータを扱う

　
■ 送信ページソース
（JavaScriptを使う必要はありません…面倒なのでJavaScriptを使っているだけです）
<form action="./xxx.html">
<script>
col = new Array('#000000','#ff0000','#00ff00','#0000ff','#ffff00','#ffffff');
image = new Array('p1.gif','p2.gif','p3.gif','p4.gif','p5.gif');

BUF = "<table>";

for (i=0;i<2;i++) {
   if (i == 0) {
      BUF += "<tr><td>文字色：</td><td>";
      par = "tx";
   }
   else {
      BUF += "<tr><td>背景色：</td><td>";
      par = "bg";
      col = col.reverse();
   }
   for (ii in col) {
      BUF += "<input type=radio name=" + par + " value=" + col[ii];
      if (ii == 0) BUF += " checked";
      if (col[ii] == "#ffffff")
         BUF += "><font color=#000000>□</font>";
      else BUF += "><font color="+col[ii]+">■</font>";
   }
   BUF += "</td></tr>";
}

BUF += "<tr><td>表示画像：</td><td><select name=image>";

for (i in image)
   BUF += "<option value=" + image[i] + ">画像【" + (eval(i)+1) + "】";

BUF += "</select></td></tr></table>";
document.write(BUF);
</script>
<p>
<input type=submit value=" 送 信 ">
<input type=reset value="リセット">
</form>
受信ページのソース
<html>
<head>
<script>
/* val["フォーム部品名"]に各値を代入 */
val = new Array();
vals = document.location.search;
vals = vals.substring(1,vals.length);
vals = vals.split("&");
for (i in vals) {
   a = vals[i].split("=");
   val[a[0]] = unescape(a[1]);
}
</script>
</head>
<script>
/* 取得した値をブラウザに出力 */
document.write("<body text='",val["tx"],"' bgcolor='",val["bg"],"'>");
document.write("<h2>JavaScriptMarket test page</h2>");
document.write("<img src='../image/",val["image"],"'>");
</script>
</body>
</html>
このままで日本語の入力データを扱うとIE以外では文字化けします。
日本語を扱うには「別ページ間でフォームデータをやりとりする」を参考に
escape(),unescape()で、フォームデータをエンコード/デコードしてやる必要があります。