- ベストアンサー
『`』がテキストタイプのvalueにある場合にhiddenを追加すると表示が崩れる
言葉では説明できないためコードを記載致しました。 下記のコードでボタンを押下した場合に表示が崩れるのは何故でしょうか？（IE6,IE7で確認） 又、対策としてはどのような事が考えられるでしょうか？（『`』を入力禁止以外でお願い致します。） 尚、innerHTMLをalertで出すとうまく追加されていないようです。。。 よろしくお願い致します。 <html> <head> <script> function createhidden( name, value, formname ){ str = '<input type="hidden" name="aaa" value="bbb"/>'; document.forms[0].innerHTML += str; } </script> </head> <body> <form action="" name="form1"> <input type="text" name="b"value="`"/><br><br> <input type="button" value="CREATE HIDDEN" onclick="createhidden()"/> <input type="text" name="a"value="`"/><br><br> </form> </body> </html>
- tetuya120
- お礼率70% (45/64)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IE6で挙動を確認しました。 まずIEは、属性値の引用符として、シングルクオテーションとダブルクオテーシ ョンの外に、質問者さんが属性値として使用されたバッククォートも使えるよう です。 質問さんのコードですが、innerHTMLで内容を取得した場合、属性値のダブルクオ テーションが取り払われ、以下のようになるみたいです。 <input type=text name=b value=`/><br><br> <input type=button value="CREATE HIDDEN" onclick=createhidden()/> <input type=text name=a value=`/><br><br> CREATE HIDDENは中に半角スペースがあるので、ダブルクオテーションは取り払わ れません。 さて、先述しましたように、IEではバッククォートも属性値の引用符として働き ますので、最初のinput要素のvalue属性値は、バッククォートからバッククォー トとなり、 `/><br><br> <input type=button value="CREATE HIDDEN" onclick=createhidden()/> <input type=text name=a value=` が、その属性値になってしまいます。 これが表示が崩れる原因ではないかと思います。 対策としては、以下のように実体参照を使われるのはいかがでしょうか？ <input type="text" name="b"value="´"/><br><br> <input type="button" value="CREATE HIDDEN" onclick="createhidden()"/> <input type="text" name="a"value="´"/><br><br>
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
innerHTMLをいじるからですね・・・ こんな風にしてみてください <html> <head> <script> function createhidden(f){ var el=document.createElement("input"); el.setAttribute("type","hidden"); el.setAttribute("name","aaa"); el.setAttribute("value","bbb"); f.appendChild(el); } </script> </head> <body> <form action="" name="form1"> <input type="text" name="b"value="`"/><br><br> <input type="button" value="CREATE HIDDEN" onclick="createhidden(this.form)"/> <input type="text" name="a"value="`"/><br><br> </form> </body> </html>
お礼
当初はyambejpさんのようにhiddenを作成していたのですが、IEが動的にnameを変更できないことが原因でうまく動作しないという経緯があり、innerHTMLを使用していました。 ↓参考 http://oshiete1.goo.ne.jp/qa5378877.html 少し改良して↓という形で実現したいと思います。 ありがとうございました。 function createhidden(f){ var el = document.createElement('<input name="aaa">'); el.setAttribute("type","hidden"); el.setAttribute("value","bbb"); f.appendChild(el); }
関連するQ&A
- テキストボックス 追加
最初5つのテキストボックスを表示して追加ボタンを押して、6個目から15個目を追加しようとしています。name="tb1" からname="tb15"までを設定したいです。15個になった際にボタンを押せなくしたいです。入力された情報をPHP側で処理しようとしています。 以下のソースを改良しようとしているのですが、うまくいきません。 どのようにしたらいいでしょうか？ <script language="JavaScript"> <!-- function add(){ document.all.AddArea.innerHTML = document.all.AddArea.innerHTML + "<br><input type=\"text\" name=\"Txt_Object\">"; } // --> </script> </head> <body> <form id="f1"> <div id="AddArea"> <input type="text" name="Txt_Object"> </div> <input type="button" value="追加" onClick="add()"> </form> </body> </html>
- ベストアンサー
- JavaScript
- 現在のカーソル行を知りたい。
'KeyDown'の下記サンプルコードでfunction msgにきたときに 何番目のテキストボックスでKYyDownされたか知りたいのですが、 関数があればお教え下さい。 <html> <head> <script type="text/Javascript"> <!-- function msg(str) { alert("check"); } //--> </script> </head> <body onKeyDown="msg('KeyDown')"> key<br> <form name="myForm" method="POST" target="_self"> <input type="text" name="text1><BR> <input type="text" name="text1"><BR> <input type="text" name="text1"><br> <input type="submit" name="button1" value="button"> </form> </body> </html>
- ベストアンサー
- JavaScript
- input type="file"のvalue監視
input="file"のvalue値が変更されたら別のテキストフィールドに表示するというScriptを書いたのですが動作してくれません。 input="file"ではなく普通のテキストフィールドならば動作します。 fileフィールドでは動作しないのでしょうか。それとも書き方がまずいのでしょうか。 以下、ソースです。 <html> <head> <title>test</title> <script type="text/javascript" src="/javascript/prototype.js"></script> </head> <body> <form action="" enctype="multipart/form-data" method="post"> <input id="file_test" name="file_test" type="file"> <br> <div id="result">表示</div> <script type="text/javascript"><!-- window.onload = function() { new Form.Element.Observer('file_test', 1, function(element, value) { document.getElementById('result').innerHTML = value; }); } //--></script> </form> </body> </html> よろしくお願いします。
- ベストアンサー
- JavaScript
- select値をhiddenのvalueに渡したい
selectで選択されたvalue値を下のhiddenのvalue値(id)に渡して、 hiddenのvalue値(id)がselectで選択されたvalue値になるような フォームを作りたいのですが、作り方をお教え頂ければ幸いです。 <form name="form" method="get" action="index.cgi"> <select name="mode"> <option value="100023">和書</option> <option value="100241">洋書</option> <option value="100524">エレクトロニクス</option> </select> <input type="hidden" name="serch_janru" value="id" /> <input type="text" name="keyword" value="keyword" /><input type="submit" name="submit" value="商品を検索" /> </form> ソース等、具体的にお教え頂けると助かります。 どうぞ宜しくお願い致します。
- ベストアンサー
- HTML
- HTMLでテキスト入力し表示させる
HTMLでテキストボックスに文字を入力し、表示させたいのですがうまくできません。 見た目はできているようなのですが、文字が表示されない状態です。 コードを記載しますので、お手数をお掛けしますがご教授頂けますでしょうか。 <html> <head> <script> function add(){ document.getElementById("target").innerText = document.getElementById("name").value; target = document.getElementById("output"); document.write(target); } </script> </head> <body> <p>名前を入力してください</p> <input id="name" name="name" type="text" size="30" onkeydown="update_field();"> <br> <input type="button" onclick="add()" value="実行"> <form action="index.html" method="post"> <br> <input type="submit" name="exit" value="戻る"> </form> </body> </html>
- 締切済み
- JavaScript
- メールフォームのソースについて
メールフォームがうまく作れません。下のソースでおかしなところがあったら 教えていただけませんか？よろしくお願いします。 html> <head> <title>sample</title> <script Language="JavaScript"><!-- function set(sObj) { str = sObj.options[sObj.selectedIndex].value; document.myFORM.action = "mailto:" + str; } // --></script> </head> <body> <form name="myFORM" method="post" action="mailto:abc@***.ne.jp" enctype="text/plain"> <br> <input type="text" value="test" NAME="data"><br> <input type="submit" VALUE="送信"><br> </form> </body> </html>
- ベストアンサー
- JavaScript
- クリックするとボタンの中の文字が変わるようにしたいんですが一応コードは出来たんですが・・うまくうごかなくて困ってます。
java スクリプトのONCLICKについて質問があります。 ONCLICKのあとに何個もオプションはつけられないのでしょうか？ <INPUT TYPE="button" VALUE=" " ONCLICK="form1.Q8.value += '1';" style="font-size:40pt"><br> にボタンをクリックするとボタンの中に「○」を表示するようにしたいんですが、うまくいきません・・・ 一応こう感じにつくってみたんですが・・・ <html> <head> <title></title> </head> <body> <script type="text/javascript"> function change_label(){ document.form1.label1.value = " ○ "; } </script> <form name="form1"> <input type="hidden" name="Q8" value=""><br> <input type="button" name="label1" value="クリックしてね" onclick="form1.Q8.value += '1';change_label();"> <input type="submit" name="Q9b" value="次へ" style="font-size:25pt"> </form> </body> </html> もしよろしければアドバイスいただけませんでしょうか・・・・
- 締切済み
- JavaScript
- Javascript IEで「識別子がありません」とエラーが出てしまいます。
ページの読み込みが完了した段階でsubmit()して、 formの内容をactionで指定した先にPOSTしたいのですが、IE6で エラー:識別子がありません コード:0 と出てしまい動作しません。 以下がそのソースです。 --------------- <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> </head> <body onload="document.export.submit()"> <form action="list.php" method="POST" name="export"> <input type="hidden" name="data[0][text]" value="テキスト"> <input type="hidden" name="mode[export]" value="" /> <input type="submit" name="submitButton" value="エクスポート"/> </form> </body> </html> --------------- なお、Firefox2.0では正常に動作しています。 <body onload="document.form['export'].submit()"> などと、いろいろと弄り回してはみたのですが、 どつぼにハマるばかりだったので、解る方ご教授下さいませ…。
- ベストアンサー
- JavaScript
- テキストフォームの内容をページ内に表示する方法
初めて質問します。 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 というエラーメッセージが出ています。 自分で使うためのプログラムで、体裁にこだわるつもりはありません。 何かよい解決方法はないでしょうか。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- 複数のフォームから送信
複数のフォームからtextの値を送信したいのですができますか？〒番号を入力して検索ボタンをおすと住所がでてきて最後に登録をしたいです。検索だけのプログラムはできてますがフォームを二つにすると両方のsubmitが登録になります・・・ 一応自分でいろいろためしましたがだめでした。。。 html,php,javascriptです。 二つともだめでした。。。。 rei1.php ------------------------- <html> <body <form method="POST" action="1.php"> お名前：<input type="text" name="name"> <br> <br> <form method="POST" action="yubin.php"> 〒：<input type="text" name="yubin"> <input type="submit" value="検索"> <br> 住所：<input type="text" name="zyu"> <br> </form> メールアドレス：<input type="text" name="email"> <br> <input type="submit" value="登録する"> </form> </body> </html> -------------------------------------- rei2.php -------------------------------------- <html> <head> <script language="javascript"><!-- function send() { document.nform.submit(); document.nform2.submit(); document.nform3.submit(); } //--></script> </head> <body> <form name="nform" method="POST" action="1.php"> お名前：<input type="text" name="name"> <br> </form> <form name="nform2" method="POST" action="yubin.php"> 〒：<input type="text" name="yubin"> <input type="submit" value="検索"> <br> 住所：<input type="text" name="zyu"> <br> </form> <form name="nform3" method="POST" action="1.php"> メールアドレス：<input type="text" name="email"> <br> <input type="submit" value="登録する"> </form> </body> </html> ------------------------------------
- 締切済み
- HTML
お礼
なるほど。。。 innerHTMLで内容取得の際に半角スペースがないとダブルクオーテションが取られるという所がポイントということですね。 これによってバッククォートが生きてきてしまうためおかしなことになると。 今回の場合、テキストボックスの値は動的に出力しているため実体参照処理を行なうのは困難なんです。。。 回答ありがとうございました