- ベストアンサー
テキストフォームの内容をページ内に表示する方法
初めて質問します。 JavaScriptも初心者です。 初めてづくしで見苦しい点もあるかと思いますが、よろしくお願いします。 複数のテキスト入力欄に書き込まれた内容をページ内に表示したいと思い、下のようなコードを書いています。 ---------- <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body> <script type="text/javascript"> <!-- function output(){ document.write(document.forms[0].text1.value); document.write("<br>"); document.write(document.forms[0].text2.value); document.write("<br>"); } // --> </script> <form action="#" name="form1"> <input type="text" name="text1"> <input type="text" name="text2"> <input type="button" value="output" onclick="output()"> </form> </body> </html> ---------- forms[0]以降、forms[1]、forms[2]…と同様に続けたいと思ってこのようにしたのですが、 function output()内の3行目でつまってしまうようです。 入力欄オブジェクトの指定方法がまずいのかも、とも思うのですが… Statement on line 6: Cannot convert undefined or null to Object というエラーメッセージが出ています。 自分で使うためのプログラムで、体裁にこだわるつもりはありません。 何かよい解決方法はないでしょうか。 どうかよろしくお願いします。
- orionnosu
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
docuemnt.writeで出力すると出力した時点で既存のコードを破壊してしまいます つまり 1行目の時点では <BODY>や<FORM>があるのですが writeメソッドから戻った時点で破壊されています 2行目は 単なる文字列の出力なので続行できます 3行目はすでに破壊された formsを探そうとするのでエラーになるのです DIVタグやSPANタグなどを設けてinnerHTMLへ設定してみましょう <div id="TextOut"></div> といった具合に設置しておいて <script type="text/javascript"> <!-- function output(){ var objDiv; objDiv = document.getElementById("TextOut"); // 前の出力を消すなら次の行を実行しましょう // objDiv.innerHTML = ""; objDiv.innerHTML += document.forms[0].text1.value; objDiv.innerHTML += "<br>"; objDiv.innerHTML += document.forms[0].text2.value; objDiv.innerHTML += "<br>"; } // --> </script> といった具合で出来るかと … 字下げには全角スペースを使用しています
その他の回答 (1)
- notnot
- ベストアンサー率47% (4844/10253)
HTML内に書かれたJavaScriptでウィンドウ自体を書き換えてしまう訳なので無理があるかと。 function output(){ var t1=document.forms[0].text1.value; var t2=document.forms[0].text2.value; document.write(t1); document.write("<br>"); document.write(t2); document.write("<br>"); } と、一旦変数に入れれば表示は出来ますが、関数が終わって戻る場所がないので読み込み中のままになりますね。 別ウィンドウを開いてそこにdocument.writeするか、DOMで元のHTMLを部分的に書き換えるか。
お礼
回答ありがとうございます。 ＞ウィンドウ自体を書き換えてしまう そういうことだったんですね。 別ウィンドウにdocument.writeするというのもありだなと思っています。 ありがとうございました！
関連するQ&A
- フォームのvalueを変更する方法
下記はjavaScriptで書いたものですが、javaScriptが有効になっていないと機能しないので perlで同じことをやりたいのですが、フォームのvalueを変更する方法とinnerHTMLの様なボタンをクリックするとテキストを変更する方法が分かりません。 ヒントでも良いので教えていただけませんか？ <HTML> <HEAD><SCRIPT language="JavaScript"> <!-- function nextA(){ var data = document.formA.data.value; data++; document.formA.data.value = data; } //--> function nextB(){ var data = document.formB.data.value; data++; document.formB.data.value = data; document.getElementById("print").innerHTML = data; } //--> </SCRIPT> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </HEAD> <BODY> <FORM name="formA"> <input name="data" value="1"> <INPUT type="button" value="足す" onclick="nextA()"> </FORM> <FORM name="formB"> <SPAN id="print">1</SPAN> <INPUT type="button" value="足す" onclick="nextB()"> <INPUT type="hidden" name="data" value="1" > </FORM> </BODY> </HTML>
- ベストアンサー
- CGI
- jQuery 変数の使い方について
jQuery 変数の使い方について 【やりたいこと】 ラジオボタンが複数ある為現在のアクションをまとめたい。 ■ $("input:radio[name='radio01']:checked").val(); の'radio01'の部分に変数を使いたい。 ■document.forms["MON"].hradio02.value の"MON"のフォーム名と、「hradio02」name部分に変数を使いたい。 http://kaicoo.blogspot.jp/2012/03/query_30.html 等を参考に元のソースから JSをまとめてみましたが、うまくいきません。 jQuery内の変数の記述方法を 教えていただけませんでしょうか？ よろしくお願いいたします。 ★JSをまとめたサンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal(obj) { var formname = obj.form.name; var radioname = obj.getAttribute('name'); alert(formname); alert(radioname); //選択したラジオのvalueをhiddenに格納する document.forms[formname].h '+ radioname +' .value = $("input:radio[name='+ radioname +']:checked").val(); alert(document.forms[formname].h '+ radioname +'.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr> <td> 結果: </td> <td> <input type="radio" name="radio01" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html> ★元のソースのサンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_01(obj) { document.forms["MON"].hradio01.value = $("input:radio[name='radio01']:checked").val(); alert(document.forms["MON"].hradio01.value); } //--> </script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_02(obj) { document.forms["MON"].hradio02.value = $("input:radio[name='radio02']:checked").val(); alert(document.forms["MON"].hradio02.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr><td> 結果: </td> <td><input type="radio" name="radio01" value="良好" onClick="setVal_01(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal_01(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal_02(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal_02(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html>
- ベストアンサー
- JavaScript
- formについて
JavaScriptを使ったアンケートについて <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>アンケート</title> <script type="text/javascript"> function Conf(){ a = document.forms[0].Email.value; if(a.match(/[a-zA-Z0-9_.]+@+[a-zA-Z0-9.]+$/)==null){ alert("間違っています"); } subWin=window.open("about:blank","form_data","width=300,height=300"); subWin.document.open(); subWin.document.write(a); subWin.document.close(); } </script> </head> <body> <form> <p>■メールアドレスを記入して下さい</p> <input type="text" name="Email" id="Email" size="40" /> <input type="button" value="確認" onClick="Conf()" /> </form> </body> </html> これだと、メルアドが間違っていますとalertが表示された後に、サブゥインドウが表示されてしまいます。 アンケートフォームを作りたくてJavaScriptを勉強中なのですが、メアドの入力が合っている場合のみサブゥインドウを表示させる方法が分からず、質問させて下さい。回答よろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- formとalert
javascript初心者です。 formを使ってテキストボックスに入力された文字をalertを使って表示させたいのですが、functionの中の記述がよくわかりません。 formを使った参考資料も見つからず質問するに至りました。 教えていただければと思います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>練習</title> <script type="text/javascript"> </script> </head> <body> <form name="a">文字を入力: <input type="text"size="20" name="name1" ><br> <input type="button" name="name2" value="確認" onclick="alert(chk)"> </form> <script type="text/javascript"> function chk(){ var n=document.a.name1.value; alert(n); } </script> </body> </html>
- 締切済み
- JavaScript
- [fromについて] onClickを使用せず合計を出す方法はありますか？
割算の計算式なのですが、計算ボタンを押さずに数字を入力したら自動的に合計を出す方法がわかりません。＞＜； まったくの素人で困っています。何卒よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>かけ算、割り算（警告）</title> <script language="javascript" type="text/javascript"> <!-- function Calculate(){ var Div var a = document.calc_IN.data_A.value; var b = document.calc_IN.data_B.value; if(b == 0){ alert("0で割ることになります"); }else{ Div = a/b; document.calc_OUT.data_D.value=Div; } } // --> </script> </head> <body> <FORM NAME="calc_IN"> <INPUT NAME="data_A" TYPE="text" SIZE=10> <INPUT NAME="data_B" TYPE="text" SIZE=10> <INPUT NAME="GO" TYPE="button" VALUE="計算開始" onClick="Calculate()"> </FORM> <FORM NAME="calc_OUT"> 割り算：<INPUT NAME="data_D" TYPE="text" SIZE=10><BR> </FORM> </body> </html>
- 締切済み
- その他([技術者向] コンピューター)
- 確認ページが表示できない
以下にフォームと確認ページ(CGI)があります。確認ページを表示すると「window.opener.documentはnullまたはオブジェクトではありません」という表示がでます。どこが問題でしょうか （フォーム） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>フォーム</title> </head> <body> <form name="user" action="kakunin.cgi" method="post"> <p>メール <input name="mail" type="text" value="" size="30"> <input type="submit"" value="確認"> <input type="reset"" value="リセット"> </form> </td> <td width="148"> </td> </tr> </table> </body> </html> ーーーー 確認ページ #! /usr/bin/perl print<<END; Content-type: text/html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head><title>確認</title> <script language="JavaScript1.1" type="text/javascript"><!-- var win; function fun(){ win=window.opener.document.all.user.mail.value; window.document.kuser.kmail.value=win; window.opener.close(); } //--> </script> </head> <body onLoad="fun();"> <form name="kuser"> <input TYPE="text" NAME="kmail" value =""> <p> <input name="button" type="submit" value="送信"> </p></form> </body> </html> END
- ベストアンサー
- CGI
- 親フレームの変数にアクセス(JavaScript）
[index.html] <script src="script.js"></script> <frameset rows="50%,*" frameborder="1"> <frame src="content1.html"name="cont1"> <frame src="content2.html" name="cont2"> </frameset> [script.js] var test_text="てすと"; [content1.html] <form> <input type="text" name="in"> <input type="button" onClick="window.parent.test_text = document.forms[0].in.value;" value="IN"> </form> [content2.html] <form> <input type="text" name="out"> <input type="button" onClick="document.forms[0].out.value = window.parent.test_text;" value="OUT"> </form> のようになっています。 「index.html」の「script.js」の変数に、「content.1html」と「content2.html」からアクセスしたいです。 ですが、フレームになっているため、思うような動作をしてくれません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 違う文字コードのページへＦＯＲＭデータを送る時
いつもお世話になっております。 EUC-JP のページからx-euc-jpのページへFORMを使いデータを渡しているのですが、どうも受け取り側で渡したデータが文字化けを起こしているようなのです。 原因が分かる方がいたら、ご教授下さい。 <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <script type="text/javascript"> <!-- function sent2() { document.INPUT.submit(); } // --> </script> </HEAD> <BODY onload="sent2()"> <form name="INPUT" METHOD="POST" action="http://okwave.jp" ENCTYPE="text/plain"> <input type="hidden" name="arr1" value="555006303003"> </form> </BODY> </HTML>
- 締切済み
- HTML
- 計算結果のテキスト表示
JavaScript計算式で結果を表示したいのですが できません。 テキストBOXには結果を入れれるのですが、 テキストBOXでなく文字として結果を出したいのですが でません。 以下ソースです。 19行目が表示希望箇所です。 <SCRIPT language="javascript"> <!-- function calc() { with(document.f) { syoukei.value = goods1.value * goods2.value * (goods3.value * 0.01) ; syoukei.value = Math.round(syoukei.value) } } // --> </SCRIPT> <FORM name="f"> 縦<INPUT type="text" name="goods1" size="3" onChange="calc();">m * 横<INPUT type="text" name="goods2" size="3" onChange="calc();">m * 厚み<INPUT type="text" name="goods3" size="3" onChange="calc();">cm<BR> 60L <INPUT type="text" name="syoukei" size="5">袋<BR> <SCRIPT language="javascript"> <!-- document.write(syoukei); } // --> </SCRIPT> </FORM>
- ベストアンサー
- JavaScript
- 記入内容のチェックについて
javascriptの初心者です。どうぞよろしくお願いいたします。 下記のような内容で「商号」が空欄の場合「確認」ボタンを押すとアラートがかえってきて欲しいのですがうまくいきません。原因が分かる方いらっしゃいますか？ <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <Script Language="JavaScript" src="common.js"></Script> <Script Language="JavaScript"> <!-- function kakunin_click(){ //入力チェック if(document.OnForm.syogo.value == ""){ //必須入力 alert("商号に入力がありません。"); document.OnForm.syogo.focus(); return false; } document.OnForm.submit(); return true; } //--> </Script> <title>契約</title></head> <body> <form name="OnForm" method=post action="***.cgi"> <center> <TABLE border="0" cellspacing="1"> <tr> <TD>商号</TD> <TD><INPUT type="text" size="42" name="syogo"></TD> </tr> </TABLE> </center> <div align="center"> <center> <table border="0"> <tr> <td width="100%"> <input onclick="kakunin_click()" type="submit" value="確認"><input type="reset" value="やり直し"></td> </tr> </table> </center> </div> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
＞docuemnt.writeで出力すると出力した時点で既存のコードを破壊してしまいます ＞つまり 1行目の時点では <BODY>や<FORM>があるのですが writeメソッドから戻った時点で破壊されています ここが全然わかってなかったです。そう言われてみれば理解できました。 書いていただいたコードを試してみます。 的確なアドバイスありがとうございました！