テキストボックスの追加と処理の改良方法について
- テキストボックスの追加および処理の改良方法について相談です。
- 現在、テキストボックスを追加するためのボタンを作成していますが、追加できる数に制限を設けたいです。
- また、入力された情報をPHP側で処理するため、ソースコードの改良も必要です。どのようにするのが良いでしょうか。
- ベストアンサー
テキストボックス 追加
最初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>
- eccschool
- お礼率8% (53/644)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <form id="f1"> <div> <input type="text" name="tb1"><br> <input type="text" name="tb2"><br> <input type="text" name="tb3"><br> <input type="text" name="tb4"><br> <input type="text" name="tb5"><br> </div> <div style="display:none" id="p"> <input type="text" name="tb6"><br> <input type="text" name="tb7"><br> <input type="text" name="tb8"><br> <input type="text" name="tb9"><br> <input type="text" name="tb10"><br> <input type="text" name="tb11"><br> <input type="text" name="tb12"><br> <input type="text" name="tb13"><br> <input type="text" name="tb14"><br> <input type="text" name="tb15"><br> </div> <p> <input type="button" value="追加" onClick="document.getElementById('p').style.display='block';this.disabled=true"> </p> </form>
関連するQ&A
- テキストボックスの背景色について
<html> <body> <form name="form1"> <input type="text" value="よろしく" name="text1"> <script language="javascript"> document.form1.text1.style.background-color = "green"; </script> </form> </body> </html> これはテキストボックスの背景色をグリーンにするプログラムなんですがうまくいきません。どこが間違っているのか指摘してください。
- ベストアンサー
- JavaScript
- 『`』がテキストタイプの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>
- ベストアンサー
- JavaScript
- JavaScriptで得た値を別ページに反映
JavaScriptで得た値を別ページに反映させたいと思っています。 同一ページでは上手くいきますが、別ページへの反映ができません。 教えてください、宜しくお願いします。 同一ページのサンプル <html> <head> <title>aa</title> <Script LANGUAGE='JavaScript'> <!-- function fncDisp() { label1.innerHTML = document.form1.txt.value; } --> </Script> </head> <body> <form name='form1' action=''> <div id='label1'>ここに表示</div> <input type='text' name='txt' value=''> <input type='button' name='btn' value='ボタン' onClick='fncDisp()'> </form> </body> </html>
- 締切済み
- JavaScript
- ボタンを押してテキストボックスを追加しテーブルの作成
avascriptでテキストボックスを追加したいのです。テーブルを組んで複数のnamaの違うボックスを追加したいです。 下記のようにイメージして書いたのですが、考えが詰まりました。 テーブルでなくても、2列複数行の形になればいいんですが・・・ 教えて下さい。よろしくお願いします。 <script type="text/javascript"> <!-- var tag_num = 4; function myAdd(){ var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", "hoge" + tag_num++); oTag.setAttribute("name", "fuga" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } --> </script> </head> <body> <form id="form1" action="check.php" method="post"> <span id="area"> <table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td><input type="text" name="hoge1" value=""></td> <td><input type="text" name="fuga1" value=""></td> </tr> <tr> <td><input type="text" name="hoge2" value=""></td> <td><input type="text" name="fuga2" value=""></td> </tr> <tr> <td><input type="text" name="hoge3" value=""></td> <td><input type="text" name="fuga3" value=""></td> </tr> </tbody> </table> </span> <input type="button" value="Add" onClick="myAdd()"> </form>
- ベストアンサー
- JavaScript
- Enterで指定のテキストボックスにフォーカスを・・・
Enterを押すと指定のテキストボックスにフォーカスを移動させたいのですがやり方がわかりません・・・。 例えば以下の様なフォームで TB1→TB2→TB3→TB5→TB6 という具合に移動させたいです。 どうか皆さんのお知恵をお貸しください。 <form name = "textbox"> <input type = "text" name="TB0" onFocus="this.blur()"> <input type = "text" name="TB1"> <input type = "text" name="TB2"> <input type = "text" name="TB3"><br> <input type = "text" name="TB4"onFocus="this.blur()"> <input type = "text" name="TB5"> <input type = "text" name="TB6"> </form>
- ベストアンサー
- JavaScript
- HTMLとJSでtxet内容を表示したい
下記のコードで質問があります。 仕様としてはtextに何かを書き込んで追加ボタンでテキストボックスの下に書き込んだ内容が表示され保存されるという風にしたいですが途中から何を書けばいいかわからなくなってしまいました。 ご指導お願いいたします <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <head> <body> <input type="text" id="form_txt"> <input type="button" width="50" value="追加" onclick="add_txt()"> <script> function add_txt() { var result = document.getElementById('form_txt'); /*ここからが何を書けばいいかわかりません・・・。*/ } </script> </body> </html>
- 締切済み
- JavaScript
- 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
- 追加したテキストボックスとテキストエリアの数の制御
下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。 で、テキストボックスとテキストエリアは最大10個までとしたいのですが、どのようにしたらいいでしょうか？ あとテキストエリアを追加していくとテキストエリアとテキストエリアの間が詰まってしまいます。間を空ける方法はないでしょうか？ <script type="text/javascript"> function myAdd(){ var oTR=document.createElement("tr"); var c=count("mat"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); } function count(name){ var tags=document.getElementsByTagName("input"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } return c; } var tag_num = 4; function myTextAreaAdd(){ var oTag = document.createElement("textarea"); oTag.setAttribute("name", "foo" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } </script> </head> <body><form method="post" enctype="multipart/form-data" action="check.php"> <table id="t0" border> <tbody> <tr><td><input type="text" name="mat1" value=""></td> <td><input type="text" name="qua1" value=""></td> </tr> <tr><td><input type="text" name="mat2" value=""></td> <td><input type="text" name="qua2" value=""></td> </tr> <tr><td><input type="text" name="mat3" value=""></td> <td><input type="text" name="qua3" value=""></td> </tr> <tr><td><input type="text" name="mat4" value=""></td> <td><input type="text" name="qua4" value=""></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd()"> <br /> <span id="area"> <textarea name="foo1"></textarea> <textarea name="foo2"></textarea> <textarea name="foo3"></textarea> <textarea name="foo4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd()"><br /> </form>
- 締切済み
- JavaScript
- htmlのテキストボックスに書かれた文字によって
htmlのテキストボックスに書かれた文字によって表示する文字を変えたいのですが、コードがいまいちどうやって書いていいかわからないのでコードを教えて下さい。よろしくお願いします。 一応できなかったコード↓ <Form name="js"> <input type="text" name="txtb"> </Form> <script> <br> if(document.js.txtb.value="a"){document.write("a")} </script>
- ベストアンサー
- その他（インターネット・Webサービス）
- テキストボックスの値で配列の値を求めるには?
やりたいと思っているのは、 (1) "INPUT" の値を入力。 (2) "koteichi" は他からの参照値。 (3) "goukei"に(1)と(2)の合計値。 (4) "total" に(3)の値に該当する配列の値。 (実際には配列の値を代入した式の答え。) という流れになります。 (3)まではなんとか分かるのですが、 (4)はどのように配列の値を代入すればいいのかが 分かりません。 なにぶん最近始めた初心者なので不規則な値は配列を使えばいいと解釈したのですが、まったく使い方を間違えているのでしょうか? こういった場合は別のやり方があるのでしょうか? どなたかよろしくお願いします。 <SCRIPT language=JavaScript1.1> <!-- rank = new Array(6); rank[0]=0; rank[1]=5;[rank2]=8;[rank3]=12;rank[4]=16;rank[5]=22; function calc(){ document.myform.goukei.innerText = eval(document.myform.INPUT.value) +eval(document.myform.koteichi.value); } // --> </SCRIPT> </HEAD> <BODY> <form name="myform"> <INPUT size="20" type="text" name="INPUT" value="0" onchange="calc()"/>+<INPUT size="20" type="text" name="koteichi" value="10">=<INPUT size="20" type="text" name="goukei" value="0"> <INPUT size="20" type="text" name="total" value="0"> </FORM> </BODY>
- ベストアンサー
- JavaScript
補足
ご返答ありがとうございます。 これでは、一挙に15個になってしまって・・。 ボタン1回押すたびにテキストボックスが一つ追加される形を希望しています。