• 締切済み

追加したテキストボックスとテキストエリアの数の制御

下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。 で、テキストボックスとテキストエリアは最大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>

みんなの回答

  • OKwebb
  • ベストアンサー率44% (92/208)
回答No.1

検証してないのでアドバイスのみ。 > テキストボックスとテキストエリアは最大10個までとしたいのですが、どのようにしたらいいでしょうか? 以下いずれか ・function myAdd()の中のカウント取得直後cが9以上だったらエラー表示してfunctionを抜ける ・function myAdd()の中の最後でc+1が10だったら追加するボタンをdisableにする > 間を空ける方法はないでしょうか? 見た目はcss(margin又はpadding)で定義

関連するQ&A

  • POSTすると配列の数がおかしくなる

    matとquaとhowtoをそれぞれ4つPOSTしているのですが、POSTされたデータを受け取るとmat4つ、qua5つ、howto5つと数がおかしくなります。 なぜかわかりません。とくにインクリメントしていないのに増えます。 教えて下さい。 <script type="text/javascript"> function myAdd(obj){ var max=15; var c=count("mat"); if(c>=max) return false; var oTR=document.createElement("tr"); 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); if(c>=max-1) obj.disabled=true; } function count(name){ var tags=document.getElementsByTagName("input"); var ta=document.getElementsByTagName("textarea"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); if(tags){ for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } } if(ta){ for(var i=0;i<ta.length;i++){ if(ta[i].name.match(reg)){ c++; } } } return c; } function myTextAreaAdd(obj){ var max=15; var c=count("howto"); if(c>=max) return false; var oTag = document.createElement("textarea"); oTag.setAttribute("name", "howto" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); if(c>=max-1) obj.disabled=true; } </script> </head> <body> <form method="post" enctype="multipart/form-data" action="check.php"> <textarea name="explain"></textarea> <table id="t0" border> <tbody> <tr> <td><input type="text" name="mat1" /></td> <td><input type="text" name="qua1" /></td> </tr> <tr> <td><input type="text" name="mat2" /></td> <td><input type="text" name="qua2" /></td> </tr> <tr> <td><input type="text" name="mat3" /></td> <td><input type="text" name="qua3" /></td> </tr> <tr> <td><input type="text" name="mat4" /></td> <td><input type="text" name="qua4" /></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd(this)"> <br /> <span id="area"> <textarea name="howto1"></textarea> <textarea name="howto2"></textarea> <textarea name="howto3"></textarea> <textarea name="howto4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd(this)"> <input type="submit" value="送る"> </form>

  • ボタンを押してテキストボックスを追加しテーブルの作成

    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>

  • テキストエリアの入力値からチェックボックスのON・OFF切り替え

    テキストエリアからフォーカスが外れた際、テキストエリアに入力された文字があればチェックボックスをONに、何もない場合はOFFにしたいです。 <HTML> <BODY> <SCRIPT language="javascript"> <!-- function Check(AAA,BBB) { var cTxt; cTxt = "txt" + AAA; item_txt = eval('document.form1.' + cTxt + '.value'); item_txt2 = item_txt.replace(/ /g,""); item_txt2 = item_txt2.replace(/ /g,""); if (!item_txt2){ alert("チェックを外す"); } else { alert("チェックを付ける"); } } //--> </SCRIPT> <FORM name="form1"> <TABLE> <TR> <TD><TEXTAREA name="txt029" rows="2" cols="20" onblur="Check('029','1')"></TEXTAREA></TD> <TD><INPUT type="checkbox" name="chk[]" value="029"></TD> </TR> <TR> <TD><TEXTAREA name="txt121" rows="2" cols="20" onblur="Check('121','2')"></TEXTAREA></TD> <TD><INPUT type="checkbox" name="chk[]" value="121"></TD> </TR> </TABLE> </FORM> </BODY> </HTML> <TR>~</TR>はPHPで書き出しをしており、行数は都度変化します(1行~20行)。 1つの<TR>~</TR>で、TEXTAREAのname下3桁・Checkの1つ目の引数・checkboxのvalueは全て同じ値が入ります(値は変化)。 Checkの2つ目の引数は書き出した順に0から振るようにしています。 この記述だと2つ目の引数は活用できてないのですが…使い道があるかと思って書いてはいるのですが結局わからなくてそのままになってます。 色々考えてはみたのですが、どのように対応するチェックボックスを指定していいのかがわかりません。 是非ご教授いただきたいです。

  • OPTION の値をテキストエリアに

    こんにちは。 すみませんが教えてください。 下記の様に作っています。 テキストエリア(note1)に、OPTIONのS・M・Lというように表示させたいのですが、1・2・3というようになってしまったり、エラーがでてしまいます。 どのように変えたらよろしいでしょうか? ”サイズ”+####の所を何回か書き直して見ましたが上手くいきません。 私が何をしたいかというと、 確認ボタンを押したら表記されている文字や数字をテキストエリアに書きたいのです。 よろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT Language="JavaScript"> <!-- A = new Array("\0","\ 1,000","\ 1,200","\ 1,500"); function Fa(x) { document.FM.TE.value = A[x]; } function ctotal() { var totalp=0; var disp1=document.FM.TE.value+" 円 "+" サイズ "+####### ; if(document.FM.TE.value>0) { totalp=parselt(totalp)+parselnt(document.FM.TE.value); } document.form03.note1.value=disp1; } //--> </SCRIPT> </HEAD> <BODY> <FORM name="FM"> <TABLE BORDER="3"><TR><TD> <SELECT name="OP" onChange="Fa(this.selectedIndex);"> <OPTION value="0" selected>0</OPTION> <OPTION value="1">S</OPTION> <OPTION value="2">M</OPTION> <OPTION value="3">L</OPTION> </SELECT></TD><TD> <INPUT size="8" type="text" name="TE" value="0"></TD></TABLE></FORM> <FORM NAME="form03"> <INPUT TYPE="BUTTON"VALUE="確認" onclick="ctotal()"> <TEXTAREA NAME=note1 ROWS=5 COLS=30></TEXTAREA></FORM>     </BODY> </HTML>

  • フォームの制御について

    下記2つのJavaScriptについて正しい記述方法について、 どうすれば良いかを模索しています。 アドバイスを頂ければ幸いです。 どうぞ何卒よろしくお願い致します。 1.チェックボックスの値とテキストフォームの値を結合する方法 <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} 2.テキストエリアの値がNullの時に値が出力されないようにする方法 <!-- textarea01の中から選択されているものを取得// --> text += '回答3:' + textarea01 + '\n'; ソース: ----------------------------------------------------------------------------------------- <head> <title>アンケートフォーム</title> <script type="text/javascript">  <!-- 値の加工用// --> function textoutput() { <!-- フォームを変数に// --> var formObj = document.form01; <!-- checkbox01を取得// --> var checkbox01 = formObj.C01; <!-- checkbox02を取得// --> var checkbox02 = formObj.C02; <!-- text01.valueを取得// --> var text01 = formObj.text01.value; <!-- textarea01.valueを取得// --> var textarea01 = formObj.textarea01.value; <!-- textを結合用の変数として準備// --> <!-- チェックボックスの中から選択されているものを取得// --> var text = 'アンケート結果' + '\n'; <!-- C01の中から選択されているものを取得// --> for ( var i = 0; i < checkbox01.length; i ++ ) { if ( checkbox01[i].checked === true ) { text += checkbox01[i]. value; text += '\n';}} <!-- C02の中から選択されているものを取得// --> for ( var i = 0; i < checkbox02.length; i ++ ) { if ( checkbox02[i].checked === true ) { text += checkbox02[i] + text01. value; text += '\n';}} <!-- textarea01の中から選択されているものを取得// --> text += '回答3:' + textarea01 + '\n'; <!-- output.valueにtextを反映(最後に改行コード)// formObj.output.value = text + '\n'; } </script> </head> <body> <strong>アンケートフォーム</strong><br /><br /> <form name="form01"> <!--チェックボックスC01// --> <strong>・回答結果</strong><br /> <table border="0" > <td colspan="2" valign="middle"width="560"> <input type="checkbox" name="C01" value=" →回答1" id="checkbox 1-1" > <label for="checkbox 1-1">回答1</label> <input type="checkbox" name="C01" value=" →回答2" id="checkbox 1-2" > <label for="checkbox 1-2">回答2</label> </td> <tr> <!--チェックボックスC02// --> <td width="86" valign="middle"> <input type="checkbox" name="C02" value=" →その他:" id="checkbox 1-1" > <label for="checkbox 1-1">その他:</label> </td> <td valign="middle"> <input type="text "name="text01" size="60" /><br> </td> </table> <strong>・回答3:</strong><br /> <textarea name="textarea01" cols="60" rows="1" " tabindex="1" STYLE="ime-mode:active"></textarea><br> <!--結果出力// --> 結果出力<br> <input type="button" value="ログ出力" onClick="textoutput();"> <input type="reset" value="リセット" onclick="return confirm('リセットボタンがクリックされました。本当に入力内容を削除してもよろしいですか?');" /><br> <input type="button" name="Copy" value="クリップボードにコピー" onClick="CopyText('output');"><br> <textarea name="output" id="output" cols="60" rows="10"></textarea><br> </form> </body> </html>

  • テキストエリア内で改行するには。

    次のスクリプトを実行すると、テキストエリア内に 01234560 と数字が表示されますが、これを 0 1 2 . というように改行も含めてテキストエリアに出力するにはどうすればよいでしょうか。 ¥nという文字を使用するのでしょうか? <html> <head> <script language="JavaScript"> <!-- var textA="" function my1() {for (i=0;i<11;i++){textA=textA+new String(i)} document.form1.text1.value=textA;} //--> </script> </head> <body> <form name="form1"> <textarea name="text1" size="10"></textarea> <input type="button" value="CLICK!" onClick="my1();"> </form> </body> </html>

  • テキストエリア内でタグ<BR>を使わずにenterキーで改行したい

    myshop.cgiという、フリーのcgiを使いたくて、超初心者なりに色々 調べながらもなんとか思い通りに出来てきたんですが、一つだけ どうしても自分では解決できなくて、困ってます。 enterキーでは改行できず、<BR>でしか改行できないテキストエリア内に、 ある文章をコピペしたいんですが、コピペした後に、いちいち<BR>を 入れるのが面倒なんで、enterキーで改行できるようにしたいんです。 しかし、どこをどういじればいいのかさっぱりわからなくて・・・。 とりあえず悩んでる付近のコードを載せておきます。 超初心者です!よろしくお願いします! 解決したいテキストエリアは、「サイトの紹介文」を入力するとこです。 ------------------------------------------------------------- print <<"EOF"; </select>$nini</td> </tr> <tr> <td>カテゴリ3 <select name="ct3"> <option value="">選択しない</optin> EOF if ($use_sub) { foreach (0 .. $#cates) { @SUB = split(/\s+/, $subct[$_]); $i=0; foreach $j (@SUB) { print qq( <option value="$_\,$i">$cates[$_] &raquo; $j</option>\n); $i++; } } } if (!$print_url) { $nourl = qq(<span style="color:red;">現在非表\示に設定されています。</span> ); } print <<'EOF'; </select>$nini</td> </tr> <tr> <td>サイトタイトル <small>(タグ利用可\能\ / 同じECサイトのテキスト広告が効果的)</small><br> <input type="text" name="tl" size="68"></td> <tr> <tr> <td>バナーのHTMLコード <small>(アフィリエイト仲介サイトからコピー&amp;ペーストして下さい。)</small><br> <textarea name="code" cols="54" rows="8"></textarea></td> </tr> <tr> <td>サイトの紹介文 <small>(タグ利用可\能\ / 但し改行は反映されないので<span style="font-weight:bold;">&lt;br&gt;を使用</span>して下さい。)</small><br> <textarea name="msg" cols="54" rows="20"><BR><BR><BR><BR></textarea></td> </tr> <tr> <td>価格 <small>(タグも利用可\能\)</small><br> <input type="text" name="url" size="68"></td> <tr> <tr> <td>サイトに関係の深いキーワード <small>(任意。検索で使用、5個までで最大文字数は20文字。)<br> <input size="14" type="text" name="key1" maxlength="20"> <input size="14" type="text" name="key2" maxlength="20"> <input size="14" type="text" name="key3" maxlength="20"> <input size="14" type="text" name="key4" maxlength="20"> <input size="14" type="text" name="key5" maxlength="20"></td> </tr> <tr> <td>サイト紹介文の位置<br> <input type="radio" name="line" value="0" id="bot" checked><label for="bot">バナーの下</label> <input type="radio" name="line" value="1" id="sid"><label for="sid">バナーの横</label></td> </tr> <tr> <td>オススメマーク<br> <input type="radio" name="rec" value="0" id="ron" checked><label for="ron">付けない</label> <input type="radio" name="rec" value="1" id="rof"><label for="rof">付ける</label></td> </tr> <tr> <td>表\示状態 (非アクティブにチェックを入れると一覧には表\示されません。)<br> <input type="checkbox" name="no_act" value="1" id="nact"><label for="nact">非アクティブにする</label></td> </tr> <tr> <td align="center"><br> <input type="submit" value=" 登録する "><input type="reset" value="リセット"> </td> </tr> </table> </form> </div> </body> </html> EOF exit;

    • ベストアンサー
    • CGI
  • ラジオボタンとテキストボックスで、ボタン選択時のテキストボックスの入力チェックするにはどうしたらよいでしょうか?

    ラジオボタンとテキストボックスの組合わせで使用し、ラジオボタン選択時のテキストボックスの入力チェックをするにはどうしたらよいのでしょうか? 以下はそのhtmlソースになります。 <table border="0" cellspacing="2" cellpadding="0"> <tr> <td><input type="radio" name="addsearch" value="検索エンジン" id="p1"></td> <td colspan="2"><label for="p1"><span class="stress2">検索エンジン</span></label></td> </tr> <tr> <td></td> <td>検索エンジン名</td> <td><INPUT TYPE=text NAME="addsearch1" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="ご紹介で" id="p2"></td> <td colspan="2"><label for="p2"><span class="stress2">ご紹介で</span></label></td> </tr> <tr> <td></td> <td>ご紹介者のお名前をおしえてください。</td> <td><INPUT TYPE=text NAME="addsearch2" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="広告を見て" id="p3"></td> <td colspan="2"><label for="p3"><span class="stress2">広告を見て</span></label></td> </tr> <tr> <td></td> <td>どこの広告ですか?</td> <td><INPUT TYPE=text NAME="addsearch3" VALUE="" SIZE=40></td> </tr> <tr> <td><input type="radio" name="addsearch" value="その他" id="p4"></td> <td colspan="2"><label for="p4"><span class="stress2">その他</span></label></td> </tr> <tr> <td></td> <td>具体的にお願いします。</td> <td><INPUT TYPE=text NAME="addsearch4" VALUE="" SIZE=40></td> </tr> </table> よろしくおねがいいたします。

    • ベストアンサー
    • HTML
  • 教えてプログラム

    Java Scriptで自動計算を行いたいのですが、うまいくいきません もう少しだと思うのですが、修正をお願いいたします。 在庫確保数+新規作成数*単価=合計で算出したいです。 NuNがなるべくでないようにしたいです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-31J"/> <title>予約登録</title> </head> <script language="javascript"> <!-- var amount = 3; var zei; var goukei; function calc(){ var total=0; var total2=0; var i=0; var go=0; var suti1,suti2; suti1 = document.myForm.d1.value; suti2 = document.myForm.d2.value; go=parseInt(suti1)+parseInt(suti2); while(i<amount*2){ total = total + document.myForm.elements[i].value*document.myForm.elements[++i].value; i++; } document.myForm.itotal.value = total; zei = total * 0.05; zei = Math.floor(zei); goukei = total + zei; document.myForm.goukei.value = goukei*go; } //--> </script> <body onload="calc()"> <FORM name="myForm" method="post"> <h2>予約登録</h2> <h3>商品一覧</h3> <table border="1" width="610"> <tr> <td>商品名</td> <td>単価</td> <td>販売可能数</td> <td>在庫確保数</td> <td>新規作成数</td> <td>金額合計</td> </tr> <tr> <td>稲荷寿司</td> <td>40<Input type="hidden" name="row0v" value="40"></td> <td>50</td> <td><input type="text" name="d1" onChange="calc()" value="0"></td> <td><input type="text" name="d2" onChange="calc()" value="0"></td> <td><input type="text" name="itotal" value="0"></td> </tr> <tr> <td>かんぴょう巻き</td> <td>40<input type="hidden" name="row1v" value="40"></td> <td>50</td> <td><input type="text" name="kanpyou1" onChange="calc()" value="0"></td> <td><input type="text" name="kanpyou2" onChange="calc()" value="0"></td> <td><input type="text" name="itotal2" value="0"></td> </tr> <tr> <td>おにぎり(梅干)</td> <td>90</td> <td>50</td> <td><input type="text" name="umeoni" value="0"></td> <td><input type="text" name="umeoni" value="0"></td> <td><input type="text" name="kanpyou" value="0"></td> </tr> <tr> <td colspan="5" align="right">単品合計金額</td> <td><input type="text" name="goukei" value="0"></td> </tr> </table> <tr> <td colspan="5" align="right">パッケージ合計金額</td> <td><input type="text" name="pakke" value="0"></td> </tr> <tr> <td colspan="5" align="right">総合計金額</td> <td><input type="text" name="sougoukei" value="0"></td> </tr> </table> <br> <br> <input type="submit" value="予約"> </form> </body>

  • javascriptによる計算

    テキストボックス「a1~6」の値とテキストボックス「b1~6」に入力された値を足し算してテキストボックス「c1~6」(例…c[i] = a[i] + b[i])を計算するJavaScriptを作成しているのですが、結果がundefinedになってしまい上手くいきません。どうやったら動くのかどうかご教授ください。 以下ソース↓ <script language ="JavaScript"> function plus() { var intResult = 0; for (i=1; i<=6; i++){ intResult[i] = 0; if (!isNaN(document.forms["A"].all["a"+i].value) && !isNaN(document.forms["B"].all["b"+i].value)){ intResult[i] += parseInt(document.forms["A"].all["a"+i].value); intResult[i] += parseInt(document.forms["B"].all["b"+i].value); } <table border = 1> <tr> <td> <table border = 1> <tr> <td> <form name="A"> <input type = "text" size = 5 name = "a1"></input> </td> <td> <input type = "text" size = 5 name = "a2"></input> </td> <td> <input type = "text" size = 5 name = "a3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a4"></input> </td> <td> <input type = "text" size = 5 name = "a5"></input> </td> <td> <input type = "text" size = 5 name = "a6"></input> </form> </td> </tr> </table> </td> <td> <table boeder = 1> <tr> <input type = "button" onClick="plus()" value = "+"></input> </tr> </table> </td> <td> <table border = 1> <tr> <td> <form name = "B"> <input type = "text" size = 5 name = "b1"></input> </td> <td> <input type = "text" size = 5 name = "b2"></input> </td> <td> <input type = "text" size = 5 name = "b3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b4"></input> </td> <td> <input type = "text" size = 5 name = "b5"></input> </td> <td> <input type = "text" size = 5 name = "b6"></input> </form> </td> </tr> </table> </td> </tr> </table> 答え <form name = "C"> <table border = 1> <tr> <td> <input type = "text" size = 5 name = "c1"></input> </td> <td> <input type = "text" size = 5 name = "c2"></input> </td> <td> <input type = "text" size = 5 name = "c3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c4"></input> </td> <td> <input type = "text" size = 5 name = "c5"></input> </td> <td> <input type = "text" size = 5 name = "c6"></input> </td> </tr> </table> </form> </body> document.C.all["c"+i].value = intResult[i]; } } </script>