| ポイント |
<![CDATA[
subWin = window.open("about:blank","form_data","width=320,height=240");
subWin.document.write("名前："+fName+"<br>");
]]>
|
| 説 明 |
テキストフィールド、パスワード、ファイルアップロード、各種ボタン、テキストエリアなどのオブジェクト内容は「document.フォーム名.オブジェクト名.value」、ラジオボタンとチェックボックスは、「document.フォーム名.ラジオボタン名.cheked」で、どれがチェックされているかどうか調べます。セレクトメニューの場合は選択された番号を調べる必要があり、「document.フォーム名.セレクト名.selectedIndex」で取得できます。この値（選択番号）を元にして「document.フォーム名.セレクト名.options[選択番号].value」として値を読み出すことができます。
ラジオボタンが複数項目ある場合はラジオボタン名で参照する方法とサンプルで使用しているフォームの参照番号を使って参照する方法があります。項目の入れ替えがない（項目が固定されている）場合は、直接参照番号を使っても問題は少ないのですが、ラジオボタンの選択項目種類が多くある場合はラジオボタン名＋参照名を利用する方が後々の変更は楽になります。
読み出したデータは「サブウィンドウ名.document.write(書き出すデータ)」でサブウィンドウに書き出すことができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>フォーム内容をサブウィンドウに表示する（複数のラジオボタンを含む場合）</title>
<script Language="JavaScript"><!--
function outData()
{
fOBJ = document.myFORM;
fName = fOBJ.yourName.value;
for (i=1; i<4; i++) if (fOBJ.elements[i].checked) fSex = fOBJ.elements[i].value;
for (i=4; i<9; i++) if (fOBJ.elements[i].checked) fAge = fOBJ.elements[i].value;
sNum = fOBJ.sel.selectedIndex;
fType = fOBJ.sel.options[sNum].value;
subWin = window.open("about:blank","form_data","width=320,height=240");
subWin.document.open();
subWin.document.write("名前："+fName+"<br>");
subWin.document.write("性別："+fSex+"<br>");
subWin.document.write("年齢："+fAge+"<br>");
subWin.document.write("趣味："+fType+"<br>");
subWin.document.close();
}
// --></script>
</head>
<body>
<form name="myFORM">
名前：<input type="text" name="yourName"><br>
性別：<input type="radio" name="seibetsu" value="男" CHECKED>男<br>
<input type="radio" name="seibetsu" value="女">女<br>
<input type="radio" name="seibetsu" value="不明">不明<br>
年齢：<input type="radio" name="age" value="10代" CHECKED>10代<br>
<input type="radio" name="age" value="20代" CHECKED>20代<br>
<input type="radio" name="age" value="30代" CHECKED>30代<br>
<input type="radio" name="age" value="40代" CHECKED>40代<br>
<input type="radio" name="age" value="50代以上" CHECKED>50代以上<br>
趣味：
<select name="sel">
<option value="釣り">釣り
<option value="プログラミング">プログラミング
<option value="昼寝">昼寝
<option value="その他">その他
</select><br>
<input type="button" value="送信内容表示" onClick="outData()">
</form>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
フォーム内容をサブウィンドウに表示する（複数のラジオボタンを含む場合）