• ベストアンサー

JavaScriptによる自動計算フォーム

サンプルを読んだりは多少わかる範囲なのですが、カスタムの段階で詰まってしまいましたのでお知恵お貸し頂ければと思います。 積算の自動計算フォームを作成しようとしてるのですが、サンプルでよくあるものが固定数値×プルダウン＝小計のようなものが多く、この固定数を入力フォーム、プルダウンも入力フォームに切り替えたいのですが、変更すると合計欄がNaNと表示されてしまいます。 何か指定が間違っているのでしょうか。 こちらのサイトを参考に作っています。 http://www.tagindex.com/javascript/form/comp1b.html 宜しくお願いします。

  • Rafi
  • お礼率98% (112/114)

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

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

まず、ご質問の内容についてですが・・・、 実際のコードを示せば、すぐに的確な回答がついたかもしれません。 本題に戻ります。たぶんどこかで構文ミスをしているのでしょう。 私もよくやってしまうのですが、NaN や undefined が出ます。 内容が複雑ではないので、私なりに作成してみました。 入力フォームということで、テキストボックスで良いでしょうか。 <html><head> <script type='text/javascript'> function keisan(){ var price1 = (document.form1.tanka1.value) * (document.form1.suryo1.value); document.form1.kingaku1.value = price1 ; var price2 = (document.form1.tanka2.value) * (document.form1.suryo2.value); document.form1.kingaku2.value = price2 ; var price3 = (document.form1.tanka3.value) * (document.form1.suryo3.value); document.form1.kingaku3.value = price3 ; document.form1.total.value = price1 + price2 +price3; } </script></head> <body> <form name='form1'> <table border='1'> <tr><td align='center'>商品</td> <td align='center'>単価</td> <td align='center'>数量</td> <td align='center'>金額</td></tr> <tr><td>商品1</td> <td><input type='text' name='tanka1' onChange='keisan()' style='width:100px' />円</td> <td><input type='text' name='suryo1' onChange='keisan()' style='width:50px' /></td> <td><input type='text' name='kingaku1' style='width:100px' />円</td></tr> <tr><td>商品2</td> <td><input type='text' name='tanka2' onChange='keisan()' style='width:100px' />円</td> <td><input type='text' name='suryo2' onChange='keisan()' style='width:50px' /></td> <td><input type='text' name='kingaku2' style='width:100px' />円</td></tr> <tr><td>商品3</td> <td><input type='text' name='tanka3' onChange='keisan()' style='width:100px' />円</td> <td><input type='text' name='suryo3' onChange='keisan()' style='width:50px' /></td> <td><input type='text' name='kingaku3' style='width:100px' />円</td></tr> <tr><td align='right' colspan=3>合計</td> <td><input type='text' name='total' style='width:100px' />円</td></tr> </table> </form> </body></html>

Rafi
質問者

お礼

ありがとうございます！ 作成して頂いた内容と自分のを見比べてみると、onChangeの扱いがおかしかったようです。 指定するものを間違っていました。 JSは本当に苦手で飲み込みにくいのですが、大変参考になりました。 本当に助かりました。

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

関連するQ&A

  • javascriptを使った自動計算→送信

    https://sv62.xserver.jp/~healing-rose/healing-rose.com/form_test/order_form.php こちらのサイトのような感じの注文フォームを作成したいと思っています。 そこで、上記のサイトで言う、「品種選択　×　本数」の自動計算の部分をjavascriptで作成しました。 そして自動計算した金額と、商品名・個数を反映させた注文フォームを PHPで作りたいと思っています。 PHPの知識は、人が作ったものをカスタマイズする程度しかないのですが、 いつも通りフォームを作ったら自動計算された部分が送信確認の画面で表示されなくなってしまいました。 自動計算の部分は http://www.tagindex.com/javascript/form/comp1a.html このサイトに書いてある通りにしているのですが、 例えば <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> この部分の「select name="goods2"」をそのまま<?php echo($str_goods2); ?>としても反映されないんです…（当たり前ですか？） そこで聞きたいのですが、javascriptで自動計算したあとに、参考サイトのような感じで 注文フォーム→送信ということは可能なのでしょうか？ PHPで自動計算…等検索してみたのですが、自動計算になるとjavascriptしか出てきません。 参考サイトの注文フォームと同じようなものの作り方を教えてください。

  • フォームの数値計算

    　今、ＨＴＭＬにて数量の計算をJavaScriptで組みたいのですが、 <form>タグ（例えば<input type="text" size="2" name="aaa" value="0">の場合 だと「aaa」）に入力された数値を取り、最終的には、複数の<form>タグに入力された 数値の合計を合計用の別な<form>タグに自動で入力されるようにしたいのですが、 そちらの方もいまいち解りません。 　どなたか、手法を教えていただきたいのですが。　よろしくお願いします。

  • 自動計算表示について

    http://www.tagindex.com/javascript/form/comp1b.html を参考に自動計算表示させるものを作っています。 当然ながらソースをそのまま実行すれば動作するのですが単価を設定しセレクトボックスの 選択項目の2番目を選択すると2倍、3番目を選択すると3倍と単純計算でしか増えず困っております。 例えばセレクトボックスの選択項目が5個あるとしそれぞれに任意の料金を指定し合計金額を求める場合 どのようにすればいいのでしょうか？

  • カートに連動したメールフォームの作り方を教えて下さい。

    数百の商品欄の中から、選んだ商品の金額と商品名を自動的にメールで送るシステムが作りたいです。 カートと書きましたが、↓上のアドレスの数の部分をボタンに変えて、タイプＡＢ混合型にしたいと思います。 タイプＡ　http://www.tagindex.com/javascript/form/comp1b.html​ タイプＢ　http://www.tagindex.com/javascript/form/comp2b.html メールに選択した商品名を自動的に書きたいのですが、良い方法はありませんか？よろしくお願いします。

    • 締切済み
    • PHP
  • DOM + Javascript について

    　プルダウンメニューで注文数を変更できるオーダーフォームがあると思いますが、注文数を変更した後、再計算といったボタンでリフレッシュしなければ反映されません。 これをプルダウンを選んだ次点(onChange)で変更した注文数に小計・合計等を再計算したいと思っています。 　 　DOM + Javascriptで可能と思っているのですが、参考になるようなサイトを紹介して頂けないでしょうか？ できれば具体的に行っているところが嬉しいです^^; #プルダウンを選択するとテキスト表示の小計と合計を再計算する。その他<input type=hidden～等も更新したいです。

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

    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で自動計算フォームを作りたいのですが

    色々、既出のログをみたのですがいまいちよくわからないことがあったので質問させてもらいます。当方htmlの知識はほどほどにありますがjsやフォームはあまりよくわかりません。またcgiではなくjsを使いたいと思っています。部分的には既出のものとかぶることもあるのですが、詳細をどのように設定していいかなどもわからなかったもので…宜しくお願いします。 ■まず下記の計算をしたいと思っています。 (1)【個数】×【商品レンタル期間】+【送料】×=Web上に表示される金額 (2)【個数】×【商品レンタル期間】+【送料】×【消費税】=上記の下に金額 (1)と(2)は縦列もしくは並列に表記するつもりです。 例えば、500円(税込525円)みたいな感じで ・【個数】は、プルダウンで選択させるようにするつもりです。 ・【商品レンタル期間】は 1泊2日、2泊3日、3泊4日の中からプルダウンで選択させるようにするつもりです。ここを ・【送料】は、固定です。 ただ、送料は3種類あって、小中大と分けたいです。 例えばこんな感じでできるとありがたいです。 表示部分には「送料」としか表示されずに、 soryo1と指定すれば100円 soryo2と指定すれば200円 soryo3と指定すれば300円 となるようにしたいです。 ただ、この送料の部分は固定ですのでプルダウン選択はなしです。 ■javascriptはJQueryなどのライブラリはなしでできるだけしたいです。 またjavascript自体は、外部からのリンクにするつもりです。 ■【商品レンタル期間】のところについて 基準となる金額が1泊2日200円の場合に 2泊3日は1泊2日の1.2倍 3泊4日は1泊2日の1.4倍 という風に、基準となる1泊2日の金額から自動計算したいです。 ながながと書いたあげく、説明が下手で申し訳ありませんが どなたかわかりやすく教えていただけるとありがたいです。 宜しくお願いいたします。

  • 自動計算をIEとFireFoxで動かすには？

    いつもお世話になっています。 フォームに入力した値を10で割った数を答えを自動で計算して、別フォームに出力する部分で、FireFoxでは自動計算されるのですがIEでは計算が行われませんでしたｘ＿ｘ； 【ソース】******************************* <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.value / 10; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 合計を計算 var total = price1; // 設定終了 document.form1.field_total.value = total; // 合計を表示 } *********************************** 解決方法をご教授頂けたら幸いです。 何卒よろしくお願い致します。

  • 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

  • javascriptの計算フォームでカンマ区切り

    下記のようなjavascriptの計算フォームで計算結果に３ケタのカンマ区切りと小数点第2位までで切り捨てるようにしたいのですがどのようにすればよろしいでしょうか？ 「javascript カンマ区切り」で検索したサイトをいろいろ見てみたのですが全然わかりません。 どなたかご教授お願い致します。 <head> <script language="JavaScript" type="text/JavaScript"> <!-- function Multiplication(form){ var test = form.ans.value = eval(form.num1.value)*eval(form.num2.value); return false; } --> </script> </head> <p>A×B×C＝合計</p> <div> <form name="multiplication"> <input type="text" size="6" name="num1"> × <input type="text" size="6" name="num2" onBlur="Multiplication(this.form)"> ＝ <input type="text" size="15" name="ans" class="txtbox">円(税別価格) <input type="reset" value="やり直し"> </form> </div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する