• ベストアンサー

同一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>

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

  • ベストアンサー
  • nda23
  • ベストアンサー率54% (777/1415)
回答No.2

getElementsByNameで同一Nameを持つ要素（配列）が求められます。 var 合計 = 0; var 要素 = document.getElementsByName("kazu"); for( var i = 0 ; i < 要素.length ; i++ ) { 　　var 値 = parseInt(要素[i].value); 　　if( !isNaN(値) ) 合計 += 値; } 同じ名前でボタンとかないですよね？ あるんだったらTypeも見なければなりません。（上記コードには無い）

hide-key
質問者

お礼

nda23様、ご厚意有難う御座います。＾＾ SAYAKA様の回答と発想は同じという事でしょうか・・・？ スクリプトも書いて頂いたのですが、 何しろ力不足で・・・＾＾； 同じ名前のボタンは無いです。 やってみますっ ε=ε=ε= (；>o<) ・・・

その他の回答 (3)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.4

inputのtypeがtextのものを拾えばよいのでしょ？ nameなんて無視しちゃえばいいじゃない。 ちなみにformにnameつけるのは非推奨なのでやめた方がいいでしょう <script type="text/javascript"> function kakunin(f) { var subtotal =0; for(var i=0;i<f.length;i++){ if(f[i].type=="text" && f[i].value.match(/^\d+$/) ) subtotal+=parseFloat(f[i].value) } var total = subtotal * 200; f.field_total.value = total; } </script> <form> <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><input type="button" size="8" onclick="kakunin(this.form)" value="合計を確認"></td></tr> <tr><td><input type="text" name="field_total" size="30" value="total"></td></tr> </table> </form>

hide-key
質問者

お礼

yambejp様、ご厚意有難う御座います。＾＾ 完璧です。（＾▽＾喜） 非推奨等のアドバイスも有難う御座います。 （知らなかったですｗ＾＾；） 本チャンに組み込んでみますっ！＾＾ °゜°゜°。。ヘ(；^^)ノ

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.3

>その記述がわかりません 残念だけどそれを書いてあげる事はできないよ。 そういう約束になってるからね。 この辺りを見ながら　かな。 http://www.tohoho-web.com/js/form.htm

hide-key
質問者

お礼

頑張ります＾＾；

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

nameで引いて合計するんじゃなくて 配列として調べてnameが条件に合致する値だった時に内容を取り出せば良いだけなのでは？

hide-key
質問者

お礼

SAYKA様、ご厚意有難う御座います。＾＾ ですが・・・orz 私の力不足のため、その記述がわかりません・・・(*ノ_<*) 配列・・・をどうやって取得するのでしょうか・・・ 申し訳ありません。。。

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

関連するQ&A

  • Javascriptで自動計算の合計の式でエラー

    度々すみません。 前回こちらで質問させて頂きましたものです。 http://okwave.jp/qa/q8737139.html 教えて頂いた内容を確認してフォームの合計を表示するところまでは出来たのですが、合計する列をひとつ増設した所、D列の合計は教えて頂いた式で合計が無事表示されたのですが、C列の合計が合計ではなく文字の並びが表示されてしまいました。 色々調べてみたのですが、この現象の原因がよくわかりません。 何かエラーがあるのでしょうか。 お知恵を貸して頂けると嬉しいです。 宜しくお願いします。 ＜スクリプト＞ <script type='text/javascript'> function keisan(){ var price1 = (document.form1.a1.value) * (document.form1.b1.value) * (document.form1.c1.value); document.form1.金額1.value = price1 ; var price2 = (document.form1.a2.value) * (document.form1.b2.value) * (document.form1.c2.value); document.form1.金額2.value = price2 ; var price3 = (document.form1.a3.value) * (document.form1.b3.value) * (document.form1.c3.value); document.form1.金額3.value = price3 ; document.form1.total.value = price1 + price2 + price3; var f1 = (document.form1.c1.value); document.form1.c1.value = f1 ; var f2 = (document.form1.c2.value); document.form1.c2.value = f2 ; var f3 = (document.form1.c3.value); document.form1.c3.value = f3 ; document.form1.ctotal.value = f1 + f2 + f3; } </script> ＜HTMLソース＞ <body> <form method="post" name="form1"> <table width="473" border='1'> <tr> <td align='center'>&nbsp;</td> <td align='center'>A</td> <td align='center'>B</td> <td align='center'>C</td> <td align='center'>D</td> </tr> <tr> <td>1</td> <td><input type='text' name='a1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b1' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c1' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額1' style='width:100px' /></td> </tr> <tr> <td>2</td> <td><input type='text' name='a2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b2' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c2' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額2' style='width:100px' /></td> </tr> <tr> <td>3</td> <td><input type='text' name='a3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='b3' onchange='keisan()' style='width:50px' /></td> <td><input type='text' name='c3' onchange='keisan()' style='width:25px' /></td> <td><input type='text' name='金額3' style='width:100px' /></td> </tr> <tr> <td colspan="3" align='right'>合計</td> <td><input type='text' name='ctotal' style='width:25px' /></td> <td><input type='text' name='total' style='width:100px' /></td> </tr> </table> </form> </body>

  • 自動計算の追加質問

    さきほどいただいた自動計算Scriptありがとうございました。さて英語でのサイトも作っていて、こちらの方は、29.99ドルといった小数点以下の数値を使いたいですが、うまくいきません。いただいたどのスクリプトでも、合計がおかしな数字ででてきてしまうのです。例えば以下のスクリプトで、商品サンプル１を１つ選ぶと合計は36.99であるはずなのに、36.989999999999995と出てしまうのです。 どうしたら良いでしょうか？ なにとぞよろしくお願い申し上げます。 <style type="text/css"> table {border-collapse: collapse;} table, th, td {border: 1px #808080 solid;} th, td {padding: 3px 10px;} th {background-color: #d3e9fa;} td {background-color: #ffffff;} td strong {color: #ff0000;} </style> <script> function keisan(){ var price1 = document.form1.goods1.selectedIndex * 29.99; document.form1.field1.value = price1; var price2 = document.form1.goods2.selectedIndex * 6; document.form1.field2.value = price2; var price3 = (price1 || price2) ? 7: 0; document.form1.field3.value = price3; var total = price1 + price2 + price3; document.form1.field_total.value = total; } </script> </head> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">$29.99</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td>$<input type="text" name="field1" size="8" value="0"></td> </tr> <tr> <td>商品サンプル2</td> <td align="right">6</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td>$<input type="text" name="field2" size="8" value="0"></td> </tr> <tr> <td>送料</td> <td align="right">$7</td> <td>　</td> <td>$<input type="text" name="field3" size="8" value="0"></td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td>$<input type="text" name="field_total" size="8" value="0"></td> </tr> </table> </form> さきほど二重ポストをしてしまいましたが、このサイト、以前は質問するとすぐに反映されたのですが、いまはすぐに質問が出てこなかったのです。そんなわけで２回同じ質問を投稿してしまいました・・・。そのせいか一度目の質問は勝手に締め切りにされてしまいました。OneOneさん失礼いたしました。。

  • 数字の合計をチェック

    お世話になります。 サンプルスクリプト探してましたが見つからなかったのでヒントとか教えてもらえれば助かります。 やりたいことは、 合計数を入力→AとBにそれぞれ枚数を入力 そのとき合計数とAとBにそれぞれ枚数を入力した数の合計が 合っていれば"合ってます" 違っていれば"違っています" とアラートを出したいのですが。 ジャバスクリプト超初心者ですのでどうか宜しくお願いします ------------------------------ <HTML> <HEAD> <TITLE> 合計数のチェック </TITLE> </HEAD> <SCRIPT LANGUAGE="javascript"> </SCRIPT> <BODY> <form name="form"> <p>合計数 <input name="total" type="text" id="total" size="5"> 枚</p> <p>A <input name="kazu1" type="text" id="kazu1" size="5"> 枚</p> <p>B <input name="kazu2" type="text" id="kazu2" size="5"> 枚</p> <p> <input type="submit" name="button" id="button" value="チェック"> </p> </form> </BODY> </HTML> ------------------------------

  • javascriptの記述方法について

    こんにちわ。 今、以下のような記述で、kei1～kei5までの合計をtotalに出そうと考えましたが、 function allcalc(){}内に書く記述で困っています。 form名を分けているのは、別の関数で各行の小計（kei1～5）を出すために分けてみましたが、あまり意味がなさそうで一つのform名に変更しようかとも思っています。 <HTML> <HEAD> <TITLE>Test</TITLE> <SCRIPT type="text/javascript"> <!-- function allcalc(total){ var al_total = 0; for (i=1; i <= 10; i++){ elementkei="total.form[" + i +"].element[2].value" if(elementkei != "") {al_total += elementkei} } document.form6.total.value = al_total; } //--> </SCRIPT> </HEAD><BODY><TABLE><FORM name="form1"> <TR><TD><INPUT type="text" name="baika1"></TD> <TD><INPUT type="text" name="suryou1"></TD> <TD><INPUT type="text" name="kei1"></TD> </FORM> <FORM name="form2"> <TR><TD><INPUT type="text" name="baika2"></TD> <TD><INPUT type="text" name="suryou2"></TD> <TD><INPUT type="text" name="kei2"></TD> </FORM> ・・・・・・・・・・・・・これが5つあります <FORM name="form6"> <TR><TD>合計</TD> <TD><INPUT type="text" name="total"> <TD><INPUT type="button" name="go" value="合計計算" OnClick="allcalc(document)"></TD> </FORM></TABLE></BODY></HTML> これを動作させてみると、「total.form[がNullかオブジェクトではありません」とエラーが流れます。 恐らく、allcalcの引数とその参照の仕方が悪いと思うのですが、 書き方を変えてみても、同じようなエラーで止まってしまいます。 どなたか方法を教えていただけないでしょうか。

  • 計算結果の表示方法を教えてください。

    javascriptでのプログラム作成がはじめてで 下記のようにINPUTへの計算結果を表示はできましたが、 INPUTを使用せず消費税を表示する方法を教えてください。 yahooかんたん決済の（運賃を入力すると合計が表示）様な 計算結果の表示方法を教えてください。 おそらく<SPAN>を使って表示していると思うのですがわかりません。 宜しくお願いします。 【省略】 <script type="text/javascript"> function keisan(){ 　　var syouhizei = document.form1.syouhin1.value * 0.05; document.form1.field1.value = syouhizei; } </script> 【省略】 <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><INPUT type="text" name="syouhin1" size="8" onkeyup="keisan()"></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr>

  • inputの数値を参照しselectによる選択肢で決められた数値を表示したい

    JavaScript の素人なもので連続の質問となってしまいました。 下記のように field1 の値を参照し、 selectでの選択肢毎に決められた数値を field2 に表示したいのですが、 どういったscriptにすれば良いか、どなたかご教示をお願い致します。 ┏━━━━━┓ ┃ 例) 150 　　┃（必ず1以上の数字が自動で入るinput="text" name="field1"） ┗━━━━━┛ （↓　select） ┏━━━━━━┓　　┏━━━━━┓ ┃ 例) イ　 　 　▼┃　　┃ 例)　B 　 　┃（結果を表示させたいinput="text" name="field2" ） ┗━━━━━━┛　　┗━━━━━┛ 　│　イ　│ 　│　ロ　│ 　│　ハ　│ 　└──┘ 　　　　　　　　（select での選択肢） 　　　　　　　│　イ　│　ロ　│　ハ　│　二 (field1値)　│　　 　│　 　　│　　 　│　　 　1 ～100　│　A　│　F 　│　J　　│　O 101～200　│　B　│　G　 │　K　　│　P 201～300　│　C　│　H　 │　L　　│　Q 301～400　│　D　│　Ｉ　　│　M　　│　R 401～500　│　E　│　H　 │　N　　│　S ※実装する際にはA～Sは数値になります。 以下に素人ながらのソースを記します。 <script type="text/javascript"> <!-- function selectarea(text) { var total = document.form1.field1.value; var choise = document.getElementById("area"); document.form1.field2.value = text; } // --> </script> <form action="" name="form1"> <table> <tr><td><input type="text" name="field1" size="30" value="150"></td></tr> <tr><td> <select id="area" onChange="selectarea(this[this.selectedIndex].value)"> <option selected="selected">選択して下さい</option> <option value="イ">イ</option> <option value="ロ">ロ</option> <option value="ハ">ハ</option> <option value="二">二</option> </select> </td></tr> <tr><td><input type="text" name="field2" size="30"></td></tr> </table> </form>

  • 配列の使い方

    JavaScript 初心者です。 下記ソースでinput type="text"でname="kazu1,name="kazu2"のように２個限定で使っているのですが将来的にＤＢから読んだ数分に変わる予定です。 その場合 eval(document.myForm.kazu1.value)+　の表現はどのように変えたらいいでしょうか。 配列の数はi7で持ってきています。 <script language="JavaScript"><!-- function ttlValue(i7){ goukei = eval(document.myForm.kazu1.value)+eval(document.myForm.kazu2.value); alert("sum "+goukei+"です"); } // --></script> </head> <table border=1> <tr> <td width="40%" ><input type="text" name="kazu1" value="10">%</td> <td width="40%" ><input type="text" name="kazu2" value="10">%</td> </tr> <tr> <td><input type="submit" name="button" value="keisan" onClick="ttlValue(2)" ></td> <td></td> </tr> </table> </form>

  • jacascriptとフォームselectメニューで計算した値を保存したい

    お世話になります。 javascriptを使った計算を勤め先で必要ということで、社内で少しパソコンに詳しいという理由で自分が手がけることになりましたorz 色々と検索しながら勉強し、ようやく思い通りのプログラムを見つけて参考にしながら実践してみたのですが、思い通りにならない箇所が一部ありまして困っています。 参考にしたのは以下のサイトなのですが、 ttp://www.tagindex.com/javascript/form/comp1b.html セレクトメニューから選んだ値を特定の数値で掛けそれを合計するという流れなのですが、このスクリプトだと、一度計算を終えると、もう一度セレクトメニューから値を選択しないと値が０になってしまっているのです。 希望としては、この選択した値を保存しておき、計算が終わってもそれ以前の選択状況のままにしておきたいんですが、どうやればできるでしょうか？ <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.form1.goods3.selectedIndex * 3000; // 単価を設定 document.form1.field3.value = price3; // 小計を表示 // 合計を計算 var total = price1 + price2 + price3; // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル2</td> <td align="right">1,000円</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field2" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル3</td> <td align="right">3,000円</td> <td><select name="goods3" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field3" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form>

  • <input type="hidden" name="action"

    <input type="hidden" name="action" <input type="hidden" name="action" value="sendmail"> <table cellspacing="1" cellpadding="5" width="580" bgcolor="black" align="center"> <tr> <td bgcolor="#efffff" width="110"><font color=black>氏名</font></td> <td bgcolor="#ffffff"><input type="text" name="name" size="30" value="" maxlength="70"></td> </tr> <tr> <td bgcolor="#efffff"><font color=black size="2">メールアドレス</font></td> <td bgcolor="#ffffff"><input type="text" name="mail" size="50" value="" maxlength="80"></td> </tr> <tr> <td bgcolor="#efffff"><font color=black>地域</font></td> <td bgcolor="#ffffff"><input type="text" name="address" size="50" value="" maxlength="70"></td> </tr> <tr> <td bgcolor="#efffff"><font color=black>御問合せ内容</font></td> <td bgcolor="#ffffff"><textarea name="comment" rows="5" cols="48"></textarea></td> </tr> </table> <center> <input type="submit" name="sub" value="クリック"> </center> </form> <h2>当サイトへの御要望</h2> <p>■各項目を御記入頂き、下のボタンをクリックして下さい。</p> <form action="form.php" method="post"> <input type="hidden" name="action" value="sendmail"> <table cellspacing="1" cellpadding="5" width="580" bgcolor="black" align="center"> <tr> <td bgcolor="#efffff" width="110"><font color=black>氏名</font></td> <td bgcolor="#ffffff"><input type="text" name="name" size="30" value="" maxlength="70"></td> </tr> <tr> <td bgcolor="#efffff"><font color=black>メールアドレス</font></td> <td bgcolor="#ffffff"><input type="text" name="mail" size="50" value="" maxlength="80"></td> </tr> <tr> <td bgcolor="#efffff"><font color=black>御要望</font></td> <td bgcolor="#ffffff"><textarea name="comment" rows="5" cols="48"></textarea></td> </tr> </table> <center> <input type="submit" name="sub" value="クリック"> </center> </form> (1)これらを含めたサイトを「HTML4,01」（文字コード「shift_jis」）で作成していました。 (2)このフォームタグをそのまま「XHTML1,0」で作成したサイト（文字コード「UTF-8」）に埋め込むには、書き直す箇所がありますでしょうか? PHPファイルも(1)で使用していたモノをそのまま(2)に使用したいと思っているのですが、文字化けがなおりません。 PHPに関しても、記述しなおす箇所があるのでしょうか? 詳しい方、お助け下さい。 宜しくお願いします。 PHPファイルは、(1)の時は正常に動作していました。

    • ベストアンサー
    • PHP
  • 自動計算について教えてください

    http://www.tagindex.com/javascript/form/comp1b.html に自動計算フォームがあります。ソースは以下です。 やりたいのは、商品サンプル３の行の変更です。 この行だけ、商品名と単価の欄はそのままで、数量欄のプルダウンメニューをなくして空欄にして、金額欄に常に　500 が表示され、合計に加算されるようにしたいのです。（商品サンプル３を送料に変更したいのです。送料は注文数によって変更されず、常に500円という設定です） 色々やってみたのですが、どうやってもできません。・・ どなたかアドバイスお願いいたします！ <style type="text/css"> <!-- table { border-collapse: collapse; } table, th, td { border: 1px #808080 solid; } th, td { padding: 3px 10px; } th { background-color: #d3e9fa; } td { background-color: #ffffff; } td strong { color: #ff0000; } --> </style> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.form1.goods3.selectedIndex * 3000; // 単価を設定 document.form1.field3.value = price3; // 小計を表示 // 合計を計算 var total = price1 + price2 + price3; // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">500円</td> <td><select name="goods1" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field1" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル2</td> <td align="right">1,000円</td> <td><select name="goods2" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field2" size="8" value="0"> 円</td> </tr> <tr> <td>商品サンプル3</td> <td align="right">3,000円</td> <td><select name="goods3" onChange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select></td> <td><input type="text" name="field3" size="8" value="0"> 円</td> </tr> <tr> <td align="right" colspan="3"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する