フォーム内容をサブウィンドウに表示する


動作ブラウザ 【 IE:3.0  NN:2.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows - - × -
Macintosh - - -
UNIX - - - - - - - -
Dreamcast - - - - - - - - - - × × -

ポイント 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(書き出すデータ)」でサブウィンドウに書き出すことができます。
サンプル <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; 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("趣味:"+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> 趣味: <select name="sel"> <option value="釣り">釣り <option value="プログラミング">プログラミング <option value="昼寝">昼寝 <option value="その他">その他 </select><br> <input type="button" value="送信内容表示" onClick="outData()"> </form> </body> </html>
補足説明 なし

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA