リスト上のテキストボックスに数値を入れるJS

前へ 次へ
このQ&Aのポイント
  • 以下の例えば120人のリストのテキストボックスに、テストの順位を表す順位を1から120まで一括入力するボタンを設けたいのですが、javascriptをご教示いただけますと幸いです。
  • また、順位は10とびで、10、20、30、・・・1200、と入れるボタン（10ずつカウントアップ）もあるとうれしいです。
  • なお、リストは１２０人とは限りません。５０人（５０行、５０テキストボックス）の場合も、８０人（８０行、８０テキストボックス）の場合もあります。
回答を見る
  • ベストアンサー

リスト上のtextボックスに数値を入れるJS

以下の例えば120人のリストのテキストボックスに、テストの 順位を表す順位を1から120まで一括入力するボタンを設 けたいのですが、javascriptをご教示いただけますと幸 いです。さらに、順位は10とびで、10、20、30、・・・1200、 と入れるボタン（10ずつカウントアップ）もあるとうれ しいです。 よろしくお願い致します。 <form method="post" action="" name="myform"> <table> <tr><td>出席番号</td><td>氏名</td><td>順位を入力</td></tr> <tr><td>1</td><td>阿藤一郎</td><td><input type="text" name="rank" value=""></td></tr> <tr><td>2</td><td>伊藤次郎</td><td><input type="text" name="rank" value=""></td></tr> <tr><td>3</td><td>宇藤三郎</td><td><input type="text" name="rank" value=""></td></tr> 　　　： 　　（以下、120人続く） <tr><td>120</td><td>加藤太郎</td><td><input type="text" name="rank" value=""></td></tr> </table> </form> なお、リストは１２０人とは限りません。 ５０人（５０行、５０テキストボックス）の場合も、 ８０人（８０行、８０テキストボックス）の場合もあり ます。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

> 順位を表す順位を1から120まで一括入力する onload=function(){ for(var i=1,r,rs=document.getElementsByName('rank');r=rs[i-1];i++) r.value=i; } > 順位は10とびで、10、20、30、・・・1200、 > と入れる 0番目（1位）は考慮せず onload=function(){ for(var i=1,r,rs=document.getElementsByName('rank');r=rs[i-1];i++) if(!(i%10)) r.value=i; } > ボタンを設 > けたいのですが ボタンにはしてないけど自由に改造して下さい。

litton101
質問者

お礼

talooさん、ありがとうございました。 御礼遅くなって失礼しました。 いただいたものを元に、次のようにしたら上手くいきました。 大変助かりました。ありがとうございました。 <html> <head> <script> function test(){ for(var i=1,r,rs=document.getElementsByName('rank');r=rs[i-1];i++) { r.value=i; } } </script> </head> <body> <input type="button" onclick="test();" value="テスト"> <table> <tr><td>出席番号</td><td>氏名</td><td>順位を入力</td></tr> <tr><td>1</td><td>阿藤一郎</td><td><input type="text" name="rank" value=""></td></tr> <tr><td>2</td><td>伊藤次郎</td><td><input type="text" name="rank" value=""></td></tr> <tr><td>3</td><td>宇藤三郎</td><td><input type="text" name="rank" value=""></td></tr> <tr><td>120</td><td>加藤太郎</td><td><input type="text" name="rank" value=""></td></tr> </table> </body> </html>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ボタンクリックでフォーカス移動

    JavaScript超ビギナーなので方法がよくわかりません。 フォームにテキストボックス（配列）４個あり ボタンを押すたびに未記入のテキストボックスにカーソルを移動したいのですが。どのようにしたらいいでしょうか。 <form name="form1" method="post"> <table width="200" border="1"> <tr><td ><input type="submit" name="Submit" value="送信"></td></tr> <tr><td ><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> </table> </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>

  • 同一nameの　input type="text" の合計を計算したい

    初めて質問させて頂きます。 form 内で同じname名を付けられたテキストフィールドの値の合計を計算し、その値に定数を乗じた値を表示させたいのですが、出来ずに困っております。 name名を別にすれば簡単に出来そうなのですが、このinputが別CGIからの受け取りの関係で数が不定で同一nameが付いてしまいます。（inputは1個以上で上限は無し） CGI側を書き換える事は自分の技術的に不可能なので、このような質問となりました。 以下は自分なりに試行錯誤の末の拙いソースです。 どなたかお分かりになる方、ご教授を宜しくお願い致します。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> <!-- function kakunin() { var sub = Form.getInputs('form1', 'text'); （ var subtotal = ～～～;　ここに上で得た数字を合計するみたいなものがくるのかなと・・・） var total = subtotal * 200; document.form1.field_total.value = total; // 合計を表示 } // --> </script> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <form action="" name="form1"> <table> <tr><td><input name="kazu" type="text" value="2"></td></tr> <tr><td><input name="kazu" type="text" value="1"></td></tr> <tr><td><input name="kazu" type="text" value="3"></td></tr> <tr><td>・・・増えたりします・・・</td></tr> <tr><td><input type="button" size="8" onclick="kakunin()" value="合計を確認"></td></tr> <tr><td><input type="text" name="field_total" size="30" value="total"></td></tr> </table> </form> </body> </html>

  • javascriptによる計算

    テキストボックス「a1～6」の値とテキストボックス「b1～6」に入力された値を足し算してテキストボックス「ｃ1～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>

  • formのtextフィールドが認識されない

    下記のようなフォームに対し、JavaScriptで処理を行おうとしています。 <form name="dateForm" method="post" action=""> <table> <tr><td>0</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111001'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>1</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111002'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>2</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111003'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> </table> <input type='text' name='date_0' maxlength='8' size=12 value='20111000'><br><br> <input type="submit" name="button" value="Check" onClick="send_self();"> <input type="submit" name="button" value="Enter" onClick="set_action();"> </form> Checkボタン押下で上記の関数を呼び出し、テキストフィールドdate[0]の値を表示すると、(1)では「20111001」と正しい値が表示されますが、(2)では下記のエラーが出てしまいます。 「プロパティ '0' の値を取得できません: オブジェクトは Null または未定義です。」 また、 alert(document.dateForm.elements[0]); // … (3) alert(document.dateForm.date); // … (4) とすると、(3)では[object]、(4)では[undefined]と表示されます。 alert(document.dateForm.date_0.value); はvalueも正しく表示されobjectとしても正しく認識されるので、配列へのアクセスに問題があるように思うのですが…。 問題点と解決法をご存知の方がいらっしゃいましたら、どうぞよろしくお願い致します。m(＿ ＿；)m

  • 再度読み込みは出来ないのでしょうか？

    各テキストボックスに値を入れて、 C11 = a11 * b11 + a12 * b21 + a13 * b31、 c12 = a11 * b12 + a12 * b22 + a13 * b32、 ： ： c21 = a21 * b11 + a22 * b21 + a23 * b31 c22 = a21 * b12 + a22 * b22 + a23 * b32・・・ としたいのですが、うまくロジックが思いつきません。 単純に式をずらずら書いたのですが、c12以降の欄がすべてゼロになってしまいます。 いい方法を教えてください。お願いします。 <head> <script> function kei(){ var form_a=document.getElementById('A'); var form_b=document.getElementById('B'); var form_c=document.getElementById('C'); var keic11 = 0; var keic12 = 0; : : keic11=parseInt(form_a.a11.value) * parseInt(form_b.b11.value) * parseInt(form_a.a12.value) * parseInt(form_b.b21.value) + parseInt(form_a.a13.value) * parseInt(form_b.b31.value); form_c.c11.value = keic11; keic12=parseInt(form_a.a11.value) * parseInt(form_b.b12.value) + parseInt(form_a.a12.value) * parseInt(form_b.b22.value) + parseInt(form_a.a13.value) * parseInt(form_b.b32.value); form_c.c12.value = keic12; 　　　　： 　　　　： } </script> </head> <body> <table border = 1> <form id = "A"> <tr> <td> <input type = "text" size = 5 name = "a11"></input> </td> <td> <input type = "text" size = 5 name = "a12"></input> </td> <td> <input type = "text" size = 5 name = "a13"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a21"></input> </td> <td> <input type = "text" size = 5 name = "a22"></input> </td> <td> <input type = "text" size = 5 name = "a23"></input> </td> </tr> </form> </table> <table boeder = 1> <tr> <input type = "button" onClick="kei()" value = "×"></input> </tr> </table> <table border = 1> <form id = "B"> <tr> <td> <input type = "text" size = 5 name = "b11"></input> </td> <td> <input type = "text" size = 5 name = "b12"></input> </td> <td> <input type = "text" size = 5 name = "b13"></input> </td> <td> <input type = "text" size = 5 name = "b14"></input> </td> <td> <input type = "text" size = 5 name = "b15"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b21"></input> </td> <td> <input type = "text" size = 5 name = "b22"></input> </td> <td> <input type = "text" size = 5 name = "b23"></input> </td> <td> <input type = "text" size = 5 name = "b24"></input> </td> <td> <input type = "text" size = 5 name = "b25"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b31"></input> </td> <td> <input type = "text" size = 5 name = "b32"></input> </td> <td> <input type = "text" size = 5 name = "b33"></input> </td> <td> <input type = "text" size = 5 name = "b34"></input> </td> <td> <input type = "text" size = 5 name = "b35"></input> </td> </tr> </form> </table> 答え <table border = 1> <form id = "C"> <tr> <td> <input type = "text" size = 5 name = "c11"></input> </td> <td> <input type = "text" size = 5 name = "c12"></input> </td> <td> <input type = "text" size = 5 name = "c13"></input> </td> <td> <input type = "text" size = 5 name = "c14"></input> </td> <td> <input type = "text" size = 5 name = "c15"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c21"></input> </td> <td> <input type = "text" size = 5 name = "c22"></input> </td> <td> <input type = "text" size = 5 name = "c23"></input> </td> <td> <input type = "text" size = 5 name = "c24"></input> </td> <td> <input type = "text" size = 5 name = "c25"></input> </td> </tr> </form> </table> </body>

  • フォームのテキストボックスの枠線を変更するには。

    フォームのテキストボックス（ほかも）は、今これを入力するところのように くぼんでますよね？ これを普通の枠線のようにはできないでしょうか？ みたのは http://www.rfs.jp/sitebuilder/perl/03/03_02.html#テキストボックス のページです。 こんなふうにするにはどうしたらいいですか？ ちなみに現在は <FORM ACTION="test.cgi"> <TABLE> <TR> <TD>名前</TD> <TD><INPUT TYPE="TEXT" SIZE=10 NAME="NAME">さん</TD> </TR> </TABLE> </FORM> というような感じになっています。

    • ベストアンサー
    • HTML
  • ２つのフォームに値を入れて計算

    ２つのフォームを作り、その２つを計算したいのですがオブジェクトの指定の仕方がエラーが出てしまい(オブジェクトを指定してくださいと出ます)わかりません。 どうか教えてください。 ちなみにforなどは使わなくても大丈夫ですのでよろしくお願いします。 function kei() { var kei1 = 0; kei1=eval(document.A.a11.value) * eval(document.B.b21.value) ; document.C.c11.value = kei1; } <table border = 1> <form name="A"> <tr> <td> <input type = "text" size = 5 name = "a11"></input> </td> <td> <input type = "text" size = 5 name = "a12"></input> </td> <td> <input type = "text" size = 5 name = "a13"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a21"></input> </td> <td> <input type = "text" size = 5 name = "a22"></input> </td> <td> <input type = "text" size = 5 name = "a23"></input> </td> </tr> </form> </table> <table boeder = 1> <tr> <input type = "button" onClick="kei()" value = "×"></input> </tr> </table> <table border = 1> <form name="B"> <tr> <td> <input type = "text" size = 5 name = "b21"></input> </td> <td> <input type = "text" size = 5 name = "b22"></input> </td> <td> <input type = "text" size = 5 name = "b23"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b31"></input> </td> <td> <input type = "text" size = 5 name = "b32"></input> </td> <td> <input type = "text" size = 5 name = "b33"></input> </td> </tr> </form> </table> <table border = 1> <form name="C"> <tr> <td> <input type = "text" size = 5 name = "c11"></input> </td> <td> <input type = "text" size = 5 name = "c12"></input> </td> <td> <input type = "text" size = 5 name = "c13"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c21"></input> </td> <td> <input type = "text" size = 5 name = "c22"></input> </td> <td> <input type = "text" size = 5 name = "c23"></input> </td> </tr> </form> </table>

  • プルダウンによる表示制御方法

    プルダウンの選択内容による表示の切り替えを行いたいです。 例えば、AとCを選択すると下にあるテキストボックスが非表示になり Bを選択するとテキストボックスが表示するように制御を行いたいです。 <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr><td> <form name="a"> <SELECT NAME="b"> <OPTION SELECTED> <OPTION VALUE="0">A <OPTION VALUE="1">B <OPTION VALUE="2">C </SELECT> </td></tr> <tr><td> <input type="text" size="6" maxlength="5" name="text1" value=""> </td></tr> </form> </table></form></td></tr></table> すみませんが、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • PHPとJSを使ったお問い合わせフォームについて

    こんにちは、セレクトボックスの選択部分を変更するとフォームの内容が変わるというフォームを作っているんですが色々試しても何がどうおかしいのかわからないので質問させていただきます。 PHPは特に触り始めて間もないのでわかりやすく教えてもらえると嬉しいです。 多分色々とおかしいことになってると思いますが出来るだけ分かりやすくよろしくお願いいたします。 【index.html】 <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> fieldset{ border: none; } </style> <script type="text/javascript"> function setForm(ex) { var target = ex.value; var group = ex.form.getElementsByTagName("FIELDSET"); var i=0, fs; while(fs=group[i++]) fs.style.display = fs.id == target?"block":"none"; } </script> </head> <body> <form action="form.php" method="post"> <table> <tr> <td>用件</td> <td> <select name="select1" onchange="setForm(this)"> <option value="">選択してください</option> <option value="A">ご質問</option> <option value="B">資料請求</option> <option value="A">その他</option> </select></td> </tr> </table> <fieldset id="A"> <table> <tr> <td>お名前</td> <td><input type="text" name="name" value=""></td> </tr> <tr> <td>Mail</td> <td><input type="text" name="mail" value=""></td> </tr> <tr> <td>サイトを知ったきっかけ</td> <td><input type="checkbox" name="chance[0]" value="friend">知り合い <input type="checkbox" name="chance[1]" value="serch">検索エンジン<td> </tr> <tr> <td>ご質問内容</td> <td><textarea name="message" cols="60" rows="5"></textarea></td> </tr> </table> </fieldset> <fieldset id="B"> <table> <tr> <td>お名前</td> <td><input type="text" name="name" value=""></td> </tr> <tr> <td>Mail</td> <td><input type="text" name="mail" value=""></td> </tr> <tr> <td>性別</td> <td><input type="radio" name="gender" value="man">男 <input type="radio" name="gender" vakue="woman">女</td> </tr> <tr> <td>住所</td> <td><input type="text" name="address" value=""></td> </tr> </table> </fieldset> <input type="submit" value="送信する" /> </form> </body> </html> </html> 【form.php】 <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <?php mb_language("japanese"); mb_internal_encoding("utf-8"); if(!empty($_POST['mail'])){ $to=$_POST['mail']; $name=$_POST['name']; $chance=$_POST['chance']; $message=$_POST['message']; $gender=$_POST['gender']; $address=$_POST['address']; $form=mb_encode_mimeheader(mb_convert_encoding("自分の名前","JIS","UTF-8"))."<aaa@aaa.com>"; $success=mb_send_mail($to,"名前：".$name."サイトを知ったきっかけ:".$chance."お問い合せ内容:".$messagge."性別：".$gender."住所:".$address,"from:".$from); } ?> <?php if ($success) { print('送信しました。'); } else { print('送信に失敗しました。'); } ?> </body> </html> よろしくお願いします！！！！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する