Javascriptで自動計算のエラーが発生した場合の解決方法
- Javascriptを使用してフォームの合計を自動計算する際にエラーが発生しました。特に、新たな列を追加した際に発生したエラーの解決方法がわかりません。
- 現象としては、D列の合計は正しく表示されていますが、C列の合計は文字の並びが表示されるというものです。
- エラーの原因を調べましたが、解決策が見つかりませんでした。Javascriptのコードにエラーがある可能性も考えられます。
- ベストアンサー
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'> </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>
- Rafi
- お礼率98% (112/114)
- JavaScript
- 回答数2
- ありがとう数12
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
値が半角数字の場合、本来JavaScriptでは「文字列」と「数値」どちらとしてでも扱えるようになっています。 ですから、通常はそのまま計算しても、ちゃんと計算できる場合がほとんどです。 ところが、計算式の演算子が「＋」だけであった場合、この演算子は文字列の連結にも使用されるため、スクリプトエンジンは「文字列」なのか「数値」なのか判断できず、本来の型である「文字列」として計算（文字連結）してしまうわけです。 この場合、値を「数値」に変換する必要があります。 例1：整数変換「parseInt」や、数値型指定「Number」を使う var f1 = parseInt(document.form1.c1.value); var fi = Number(document.form1.c1.value); 例2：文字連結に使用しない演算子を使用し、数値と思わせる。 var f1 = document.form1.c1.value * 1; var f1 = document.form1.c1.value / 1; var f1 = document.form1.c1.value - 0; f2、f3も同様にします。 あと、フォーム要素から値を取得した後に、同じ値を同じフォーム要素に書き戻しているのは、何か意図があっての事でしょうか？ もし分からず書いているなら、その行は不要です。 var f1 = (document.form1.c1.value); document.form1.c1.value = f1 ; ←ここは不要 それと、「f1 = (document.form1.c1.value)」と（）で囲まれていますが、これも何の意味がありません。 それらを踏まえたうえで書き換えたのが以下です。 ※追加されたC行部分のみ記載します。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ var f1 = Number(document.form1.c1.value); var f2 = Number(document.form1.c2.value); var f3 = Number(document.form1.c3.value); document.form1.ctotal.value = f1 + f2 + f3; ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 最後に、要素をフルネームで記述するのは、最近のWebページではほとんど使用しないので、書き換えてみました。 各セルの値を配列に代入し、セルと配列を対応させて管理する方が、項目増えた時など編集が楽になると思うのですが、今回は省略。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <BODY> <FORM name="form1"> <TABLE width="473" border="1"> <TBODY> <TR> <TD align="center"> </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" id="A1" onchange="keisan()" style="width:50px"></TD> <TD><INPUT type="text" id="B1" onchange="keisan()" style="width:50px"></TD> <TD><INPUT type="text" id="C1" onchange="keisan()" style="width:25px"></TD> <TD><INPUT type="text" id="D1" style="width:100px" value="0"></TD> </TR> <TR> <TD>2</TD> <TD><INPUT type="text" id="A2" onchange="keisan()" style="width:50px"></TD> <TD><INPUT type="text" id="B2" onchange="keisan()" style="width:50px"></TD> <TD><INPUT type="text" id="C2" onchange="keisan()" style="width:25px"></TD> <TD><INPUT type="text" id="D2" style="width:100px" value="0"></TD> </TR> <TR> <TD>3</TD> <TD><INPUT type="text" id="A3" onchange="keisan()" style="width:50px"></TD> <TD><INPUT type="text" id="B3" onchange="keisan()" style="width:50px"></TD> <TD><INPUT type="text" id="C3" onchange="keisan()" style="width:25px"></TD> <TD><INPUT type="text" id="D3" style="width:100px" value="0"></TD> </TR> <TR> <TD colspan="3" align="right">C合計</TD> <TD><INPUT type="text" id="ctotal" style="width:25px" value="0"></TD> <TD>D合計<INPUT type="text" id="total" style="width:100px" value="0"></TD> </TR> </TBODY> </TABLE> </FORM> </BODY> <SCRIPT type="text/javascript"> function keisan(){ // 計算に使用するデータの行数（1～3なので3行） var gyou = 3; // C列合計 var goukei_c = 0; // D列合計 var goukei_d= 0; // 以下計算を行数分繰り返す for(i = 1;i <= gyou;i++){ // 行計算 var keisanti = document.getElementById('A' + i).value * document.getElementById('B' + i).value * document.getElementById('C' + i).value; // 計算した行の値をD行合計に加算 goukei_d += keisanti; // 現在の行のC列の値をC行合計に加算 goukei_c += Number(document.getElementById('C' + i).value); // 計算結果をフォームに出力 document.getElementById('D' + i).value = keisanti; document.getElementById('total').value = goukei_d; document.getElementById('ctotal').value = goukei_c; } } </SCRIPT>
その他の回答 (1)
- pringlez
- ベストアンサー率36% (598/1630)
# var f1 = (document.form1.c1.value); このような形式で取得した値は、型が文字列です。文字列同士の加算をしているので文字列が結合した結果となっているのです。加算をする前に文字列を数値型にする必要があります。 文字列型を数値型に変換する方法はいくつかありますが、例えばこんな感じです。 document.form1.ctotal.value = Number(f1) + parseInt(f2) + (f3 - 0); 3種類混ぜて書きましたが、こんな混ぜ方をすると間違いの元なので、どれかひとつを選んで統一してください。 一方でD列は文字列同士で掛け算をしています。掛け算の記号があった場合、値が数値であると予想されるため暗黙的に数値に変換しているのです。しかし暗黙的な変換に頼らず、明示的に自分で変換をした方が間違いは減ると思います。
お礼
ありがとうございます！ なぜ同じ式に見えるのに反応が違うのか悩んでいました。 Dの方は同じ式でも先に掛け算でその結果の為に既に数字認識と仮定して動くんですね。 暗黙的なものもあると意識してこれから組んで行こうと思います。
関連するQ&A
- 自動計算について教えてください
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>
- ベストアンサー
- JavaScript
- 自動計算の追加質問
さきほどいただいた自動計算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さん失礼いたしました。。
- ベストアンサー
- JavaScript
- 自動計算java scriptについてご質問
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>
- 締切済み
- JavaScript
- 動的な表の計算
いつもお世話になります。 見よう見まねでやっている初心者です。 下記のような動的な表があります（PHPで表の行が可変します。） name="aa"に入力された値とname="bb"に入力された値の足し算の 回答をname="kaito"に出したいと思っています。 計算ボタンを押すとname="kaito"に答えを出したいのですが、 以下のような式ですと当然ながら全く反応しません。 javascriptまたはPHPをどう記述すれば表の値を計算できるようになるのでしょうか？ できれば具体的に教えて頂ければ大変助かります。 ご教授の程よろしくお願い致します。 <script> function keisan(){document.tasizan.kaito.value=(document.tasizan.aa.value)+(document.tasizan.bb.value)} </script> <form name="tasizan"> <table width="100" border="1"> <tr> <th width="10" scope="col">a</th> <th width="10" scope="col">b</th> <th width="20" scope="col">回答</th> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> <tr> <td><INPUT type="text" name="aa" ></td><td><INPUT type="text" name="bb" ></td><td><INPUT type="text" name="kaito" ></td> <td><input type="button" value="計算" onclick="keisan()"/></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- ジャバスクリプトで作った自動計算フォームが
ジャバスクリプトで作った自動計算フォームが 動かなくて困り果ております。 初心者です。御指南のほど、どうぞ宜しくお願いします。 ■ 編集ソース <html> <head> <title>テスト</title> <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 * 2900; document.form1.goods1.options[document.form1.goods1.selectedIndex].value; document.form1.field1.value = price1; // 小計を表示 // 合計を計算 var total = price1 // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>コース名</th> <th>単価</th> <th>数量</th> <th>縁</th> <th>金額</th> </tr> <tr> <td>激安コースA</td> <td align="right">2,900円</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> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select></td> <td><select name="goods1" onchange="keisan()"> <option value="0">額タイプを選択してください</option> <option value="500">タイプ1（500円）</option> <option value="1000">タイプ2（1,000円）</option> <option value="1500">タイプ3（1,500円）</option> </select></td> <td><input type="text" name="field1" size="8" value="0" /> 円</td> </tr> <tr> <td align="right" colspan="4"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- JavaScriptを使った計算フォーム
JavaScriptを使った計算フォームで質問です。 人数をテキストボックスに入力し、そのあと項目を選ぶと計算がされるようにしたいのですが ラジオボタンが持っているvalueを取り出せません。 下記の「←------???」と書いてあるところを何とかすれば完成だと思うのですが、 どなたか教えていただけないでしょうか？ <script language="JavaScript" type="text/JavaScript"> function sjLeft(source,length) { if (source.length < length) { return (""); } return source.substr(0, length); } function sjReplace(source,start,length,target) { sjlen = source.length; if ((start > sjlen) || (start < 0)) { return String(""); } return String(sjLeft(source,start ) + target + source.substr(start+length, sjlen)); } function sjInsert( source, start, target) { return sjReplace(source,start,0,target); } function fcheck(obj) { s1_2value = ??? * new Number(document.form1.n1.value); ←------??? document.form1.s1_2.value = String(s1_2value); document.form1.total.value = s1_2value; return true; } </script> <form name="form1" method="POST"> <table width="400" border="1"> <tr> <td>人数</td> <td></td> <td><input type=text name=n1 size=8 onChange="fcheck(this);">人</td> <td></td> </tr> <tr> td><input name="n2" type="radio" value="13000" onChange="fcheck(this);">食事A</td> <td>\13,000</td> <td>×人数</td> <td><input name=s1_2 type=text size=8 readonly>円</td> </tr> <tr> <td colspan="2"> </td> <td>総計</td> <td><input type=text readonly name=total size=10>円</td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- 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>
- ベストアンサー
- JavaScript
- メールの本文に入れる言葉を選んだ物によって変更したい。
これで本文に文字を入れられるのは分るのですが、 <a href="mailto:sample@oooindex.com?subject=お問い合わせ&body=ご記入ください">メールはこちらへ</a> メールに下で選択した商品名を自動的に入力するようにしたいです。どうすれば良いでしょうか？初心者なので、お手柔らかにお願いします。 （どんなスタイルかはこのアドレスに載っています） http://www.tagindex.com/javascript/form/comp1b.html <HTML> <HEAD> <TITLE>TAG index Webサイト</TITLE> <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 NAME="form1"> <TABLE BORDER="1" CELLSPACING="2" CELLPADDING="2" BGCOLOR="#FFFFFF"> <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>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5 </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>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5 </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>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5 </SELECT></TD> <TD><INPUT TYPE="text" NAME="field3" SIZE="8" VALUE="0"> 円</TD> </TR> <TR> <TD ALIGN="right" COLSPAN="3"><FONT COLOR="#FF0000"><B>合計</B></FONT></TD> <TD><INPUT TYPE="text" NAME="field_total" SIZE="8" VALUE="0"> 円</TD> </TR> </TABLE> </FORM> </BODY> </HTML>
- ベストアンサー
- HTML
- html:計算フォームを組み込みフォーム作成したい
htmlのフォームで、計算フォーム（掛け算）を組み込んだフォームを作成したいです。 ◆◆◆単価 ＊ ■■■数量 ＝ 合計額☆☆☆ 単価の◆は予めサイト側で指定 数量の■はページ閲覧者の 任意入力 合計額の☆☆☆ は 自動で計算された答えが出力される <html> <head> <title>TAG index Webサイト</title> <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> </body> </html> 上記のテンプレートを参考にさせていただきましたが、このテンプレートだと数値が１～５までしか 選択できません。好きな数字を任意入力できるようにしたいです。 計算結果がすぐに表示されるのは嬉しいですが、 この内容と合わせて更に ・お名前 □□□□ ・連絡先メールアドレス □□□□ これらの要素を、送信ボタンを押して xyz@abcde.co.jpに 内容が届くようにしたいです。 ●送信● ●リセット● の２つのボタンを配置 （送信ボタンを押すと、xyz@abcde.co.jpに以上の項目が記載されたメールが届くようにする） （リセットを押すと入力されたフォームの数値がリセットされる） <p> <input type="submit" value="送信する"> <input type="reset" value="リセット"> </p> 上記の内容を入力することで 送信する/リセット のボタンを作ることはできましたが、 例えばabc@xyz.co.jpに 入力された項目すべてを送信するには 送信する ボタンの後にハイパーリンクを使えばよいのでしょうか。 お手数ですが、ご指南お力添えの程、よろしくお願いしますm(_ _)m
- 締切済み
- HTML
お礼
ありがとうございます。大変詳しく教えて頂き、躓いていた所や勘違いしている所や無駄がよくわかりました。 最近の状況等も伺えて参考になりました。 いろいろ勉強してみたいと思います。