メールフォーム内の自動計算について

前へ 次へ
このQ&Aのポイント
  • メールフォーム内の自動計算について説明します。フォーム内の金額はvalue属性を使用して計算されていますが、同時に商品名としても使用したい場合、問題が発生します。そのため、解決策を求めています。
  • メール送信プログラムは変更できないため、自動計算フォームの変更を検討しています。
  • JavaScriptの勉強中であり、助言やアイデアを歓迎しています。
回答を見る
  • ベストアンサー

メールフォーム内の自動計算　valueの値を2つの目的で使いたい

以下の様な形で、自動計算フォームを作っています。 金額は「value="　"」から計算されているのですが、この部分は同時に使おうと思っているメール送信の商品名の部分にあたります。 このまま送信してしまうと、商品名が数字だけになってしまうのですが、何かよい方法をご存知でしょうか・・・。 メール送信のプログラムは私の方では変えられないので、出来れば以下の自動計算フォームを変える事で解決できたらと思っています。 javascriptは専門ではないのですが、こつこつ勉強中です。よろしくお願いいたします。 -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> <!-- function cal(){ var price1 = document.mail_form.goods1.options[document.mail_form.goods1.selectedIndex].value; var price2 = document.mail_form.goods2.options[document.mail_form.goods2.selectedIndex].value; var total = parseInt(price1) + parseInt(price2); document.mail_form.field_total.value = total; // 合計 } // --> </script> </head> <body> <form name="mail_form"> <p id="mail-form-box1"> ●商品１<br /> <select name="goods1" onChange="cal()"> <option value="100">バッグA 100円</option> <option value="200">バッグB 200円</option> <option value="300">バッグC 300円</option> </select> </p> <p id="mail-form-box2"> ●商品２<br /> <select name="goods2" onChange="cal()"> <option value="100">靴A 100円</option> <option value="200">靴A 200円</option> <option value="300">靴A 300円</option> </select> </p> 合計: ＄<input type="text" name="field_total" value="0"><BR> </form> </body> </html> --------------------------------------------------------

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

  • ベストアンサー
  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

私ならこうするわ。 valueに 商品名 値段 としてセット 間はスペースでもなんでもいいわ。 商品名や値段に使われない文字を区切り文字にすること。 JavaScriptでvalue値を取得する際に 商品名と値段を切り分けてやるの。 切り分けはsplitという関数を使えばいいわ。

erimo_may
質問者

お礼

早速のアドバイスありがとうございます。お返事が遅れてしまい申し訳ありません。アドバイスを元に自分なりに参考資料をあさりつつ書き換えてみたのですが、JavaScriptの基礎知識がたりないためうまく動きません・・・。 <option value="バッグA,100">バッグA 100円</option>　として、 JavaScriptに.split(",")を以下のように書き足して、その後がどうもよくわからず・・・。 var price1 = document.mail_form.goods1.options[document.mail_form.goods1.selectedIndex].value.split(","); 教えてちゃんで申し訳ないのですが、もうひとアドバイス頂けますでしょうか。

その他の回答 (1)

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.2

price1[0]にバッグA price1[1]に100 が入っているわ。 alertで出してみればいいわ。 JavaScriptに限らず、プログラムが出来ない人に多く共通していることは 途中経過を追わないってことね。 エラーが発生したとき、 どこまでは正常にいっているのか 変数に何が入っているのか それを確かめようとしない人が多いわ。 それを確かめるだけで随分変わるわよ。 面倒だけどね。 ガンバ。

erimo_may
質問者

お礼

askaaska様 再び回答していただき本当にありがとうございます。 ご指摘の通り、専門外とあきらめつつ自分やりくりしている中途半端な姿勢なので、逐一基本的な所でつまずくんですよね・・・。 なのでaskaaska様のような方にアドバイス頂けるのは、本当に本当にありがたいです。 スケジュールの都合でどうにかしなくてはならず、「parseInt」を調べてみた所、「先に記述した数字を書き出す」ということだったので、苦肉の策として今回はこれを使う事にしました・・・。 でもこの件に関しては、引き続き調べて必ず理解できるようにします。 もうちょっと勉強して、またお返事させてもらってもいいでしょうか。 ありがとうございます！！！　大感謝です！

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

関連するQ&A

  • 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>

  • ジャバスクリプトで作った自動計算フォームが

    ジャバスクリプトで作った自動計算フォームが 動かなくて困り果ております。 初心者です。御指南のほど、どうぞ宜しくお願いします。 ■　編集ソース <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>

  • 自動計算について教えてください

    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>

  • 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

  • 自動計算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>

  • 自動計算の追加質問

    さきほどいただいた自動計算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さん失礼いたしました。。

  • 計算結果を変数に代入

    とあるサービスの料金計算フォームを制作しています。 特定の場合のみ料金が割引されるので、if構文で条件分岐してみたところ、 計算結果（小計）にはうまく反映されるのですが、いくつかの小計を合計すると、 if構文で分岐する前の（つまり割り引き前の）値段で計算されてしまいます。 // 小計１ var total_01 = document.form_test.price_01.options [document.form_test.price_01.selectedIndex].value * document.form_test.goods_01.options [document.form_test.goods_01.selectedIndex].value + document.form_test.price_02.options [document.form_test.price_02.selectedIndex].value * document.form_test.goods_02.options [document.form_test.goods_02.selectedIndex].value ; // 小計１ document.form_test.F-total_01.value = total_01; // 小計１を表示 if (document.form_test.price_01.options [document.form_test.price_01.selectedIndex].value != 0 && document.form_test.price_02.options [document.form_test.price_02.selectedIndex].value != 0) {document.form_test.F-total_01.value = total_01 - 500;} // 両方で-500 if (total_01 <= 0) {document.form_test.F-total_01.value = 0;} // 合計 var total_all = total_01 + total_02 + total_034; // 合計 document.form_test.F-total_all.value = total_all; // 合計を表示 小計を表示する <INPUT TYPE="text" NAME="F-total_01" VALUE="0"> に出てきた値を、そのまま次の計算に代入できれば 解決するのではないかと思うのですが、行き詰ってしまいました。 どうかアドバイスをよろしくお願いいたします。

  • 見よう見まねで以下のように作成してみたのですが

    見よう見まねで以下のように作成してみたのですが 作動しませんでした。 （当方javascript初心者です） どこに問題があるのか、指摘してくださる方を探しています。 極めて初歩的なところで誤っているのだろうと思いますので 質問するのも恐縮なのですが・・・ どなたかよろしくお願いいたします。 ------------------------------------------ <HTML> <HEAD> <script language="JavaScript"> function calc(){ var a = document.form1.001.value; var b = document.form1.002.value; var c = document.form1.003.value; var d = document.form1.004.value; var total = a + b + c + d; document.form1.field.value = total; } </script> </HEAD> <BODY> <BR><BR> <form name="form1"> <Select name="001"> <Option value="10">case1 <Option value="20">case2 </Select>ケース <BR><BR> <INPUT size="15" type="text" name="002">number <BR><BR> <Select name="003"> <Option value="100">volume1 <Option value="200">volume2 <Option value="300">volume3 </Select>ボリューム <BR><BR> <Select name="004"> <Option value="0">N <Option value="50">size1 <Option value="100">size2 <Option value="150">size3 </Select>サイズ <BR><BR> <INPUT type="button" name="calc" value="計算" onClick="calc()"><BR><BR> <input size="15" readonly="readonly" name="field" type="text">total </form> </BODY> </HTML>

  • for文についてご教授ください

    javascriptを学習しています。初級者のためご教授のほどお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <script> function kazu(){ var fObj = document.itemlist; var price1 = fObj.item1.options[fObj.item1.selectedIndex].value; var price2 = fObj.item2.options[fObj.item2.selectedIndex].value; var total = parseFloat(price1) + parseFloat(price2); document.getElementById("total").value = total; } </script> </head> <body> <header> <form action="#" name="itemlist" > <table> <tr> <td> <select name="item1" onchange="kazu()"> <option value="100">itemA-1</option> <option value="200">itemA-2</option> </select> </td> </tr> <td> <select name="item2" onchange="kazu()"> <option value="1000">itemB-1</option> <option value="2000">itemB-2</option> </select> </td> </tr> <tr> <td name="total"> <input type="text" value="" id="total" /> </td> </tr> </table> </form> </body> </html> 上記の内容をfor文を使い動作するようにと思っています。 自分で以下の内容を考えたのですがが動作しません。 以下の内容の問題点を教えいただければと思います。なにとぞよろしくお願いいたします。 function kazu(){ var fObj = document.itemlist; var len = document.itemlist.length; for(i=1;i<=len;i++){ var price[i] = fObj.item[i].options[fObj.item[i].selectedIndex].value; } var total = parseFloat(price1) + parseFloat(price2); document.getElementById("total").value = total; }

  • セレクトボックスの値から料金を計算したい

    お世話になります。 現在、HTML中に下記のソースを記述しセレクトボックスの数量が選択されたときに自動計算をしようとしています。 ------------------------------------------------------------------- <table summary="ご購入内容"> <tr> <th><p>カレンダー</p></th> <td class="price">1,000円（税込）</td> <td class="select"> <input type="hidden" name="field16_name" value="カレンダー" /> <input type="hidden" name="field16_req" value="no" /> <select type="select" id="item1" name="field16_text" accesskey="a" tabindex="1" onchange="keisan();"> <option value="0">　0部</option> <option value="1">　1部</option> <option value="2">　2部</option> <option value="3">　3部</option> <option value="4">　4部</option> <option value="5">　5部</option> </select></td> </tr> </table> <table summary="小計金額"> <tr> <th><p>小計金額</p></th> <td><input type="text" id="sender-shoukei1" name="field21_text" value="0" accesskey="k" tabindex="6" /> 円（税込）</td> </tr> <tr> <th><p>送料</p></th> <td> <input type="text" id="sender-postage1" name="field22_text" value="0" accesskey="k" tabindex="7" /> 円（税込）</td> </tr> </table> <table summary="合計金額" class="inner-02 m20"> <tr class="gokei"> <th>合計金額</th> <td> <input type="text" id="sender-goukei" name="field29_text" value="0" accesskey="k" tabindex="14" /> 円（税込）</td> </tr> </table> ------------------------------------------------------------------- <script type="text/javascript"> /* <![CDATA[ */ function keisan(){ /* 商品 */ var price1 = document.form.field16_text.options[document.form.field16_text.selectedIndex].value; var field21_text= parseInt(price1)*1470 ; /* 小計 */ document.form.field21_text.value = addFigure(field21_text); /*送料 */ var price1p = 0; if ( price1 < 2 ) { price1p = price1 * 290; } else { price1p = 0; } var field22_text = parseInt(price1p); if ( field21_text > 5000 ) { field22_text = 0; } document.form.field22_text.value = addFigure(field22_text); /* 合計 */ var field29_text = parseInt(field21_text); document.form.field29_text.value = addFigure(field29_text); function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } } /* ]]> */ </script> ------------------------------------------------------------------- しかし、「'document.form.field16_text'はNullまたはオブジェクトではありません」とエラーが出てしまいます。 アンダーバーは利用できないのでしょうか？どこに問題があるのかお教えください。 どうぞ宜しくお願いいたします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する