• ベストアンサー

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日の金額から自動計算したいです。 ながながと書いたあげく、説明が下手で申し訳ありませんが どなたかわかりやすく教えていただけるとありがたいです。 宜しくお願いいたします。

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

どこまでできているのか不明ですが、勉強なさってください。 HTMLもscriptも提示されていないので、とりあえず、ごくプリミティブな参考例です。（単価100の設定で、計算結果を表示） 1）プルダウンに対応させたらどうなるか？ 2）文字を入力するとエラー表示（NaN）になるけど、回避するには？ 3）計算の途中で条件判断したり、分岐するには？ などなど、いろいろありますので調べてみてください。 （適当に検索しても、結構情報は見つかるはずです） 質問文で一番疑問なのは、入力して計算結果を表示した後、どうするつもりなのかですねぇ。（javascriptだけだと、後はどうしようもないけど…） <html> <script type="text/javascript"> function calc() { var tanka = 100; var kazu = atai('kazu'); var kikan = atai('kikan'); var soryo = atai('soryo'); var result = tanka*kazu*kikan + soryo; document.getElementById('result').innerHTML = result + '円'; } function atai(eId){ return parseInt(document.getElementById(eId).value); } </script> <body> <p>個 数:<input type="text" id="kazu"> <br>期 間:<input type="text" id="kikan"> <br>送 料:<input type="text" id="soryo"> <p><input type="button" value=" 計算 " onclick="calc()"> <p> <div style="width:400px;border:1px solid gray;padding:8px;"> 【個数】×【レンタル期間】+【送料】=<span id="result"></span> </div> </body> </html>

ritzkun
質問者

補足

>入力して計算結果を表示した後、どうするつもりなのかですねぇ。 なるほど… そりゃそうです。説明不足で申し訳ないです… 計算結果を出したものをつかってレンタル用のカートに 反映させるつもりです。 いまのところ、プルダウンで 【個数】と【レンタル期間】を別々に入力し、 レンタル用のカートのボタンをクリックすることでphpで反映させてます。 ただ、phpは自分でつくったものではなく、別の人がつくったものなので どうやって反映させているのかはわからないです。

その他の回答 (1)

  • Splatter
  • ベストアンサー率41% (181/440)
回答No.2

ちょっと長いですが…。 メモ帳にでも貼り付けて、HTMLファイルで保存して下さい。 あくまで自動計算のみです。 ------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <TITLE>質問番号4688991</TITLE> <STYLE TYPE="text/css"> <!-- .noborder {border-width:0pt; border-style:none;} --> </STYLE> <SCRIPT language="JavaScript" type="text/javascript"> <!-- // 送料選択 function SelectCarriage() { // 送料選択リストの値を取得する var selectedIndex = document.getElementById('selection').value; // 値に応じて送料変更を実行 if (selectedIndex == 1) { ChangeCarriage(100); } if (selectedIndex == 2) { ChangeCarriage(200); } if (selectedIndex == 3) { ChangeCarriage(300); } } // 送料変更 function ChangeCarriage(amount) { // 金額表示エリアを取得する var carriage = document.getElementsByName('carriage'); // 金額表示エリアの個数分ループ for (i = 0; i < carriage.length; i++) { // 金額表示エリアの金額を変更する carriage[i].value = amount; // 料金計算 CalcAmount(i); } } // 料金計算 function CalcAmount(index) { // 個数リストの値を取得する var count = document.getElementsByName('count')[index].value; // 商品レンタル期間リストの値を取得する var term = document.getElementsByName('term')[index].value; // 送料の値を取得する var carriage = document.getElementsByName('carriage')[index].value; // 金額表示エリアを取得する var total = document.getElementsByName('total')[index]; // 税込表示エリアを取得する var taxin = document.getElementsByName('taxin')[index]; // 個数かレンタル期間が選ばれていない場合 if (count == 0 || term == 0) { // 金額と税込を0に設定する total.value = 0; taxin.value = 0; return; } // レンタル期間の倍率 var rate = 1; // 2泊3日なら1.2倍とする if (term == 2) { rate = 1.2; } // 3泊4日なら1.4倍とする if (term == 3) { rate = 1.4; } // 金額を計算する var amount = eval(500 * count * rate + "+" + carriage); // 表示エリアに金額・税込をセットする total.value = amount; taxin.value = eval(amount * 1.05); } --> </script> </HEAD> <BODY ONLOAD="SelectCarriage();"> <TABLE BORDER="1"> <TR> <TD BGCOLOR="LIGHTPINK">送料選択</TD> <TD> <SELECT ID="selection" onchange="SelectCarriage();"> <OPTION VALUE="1">送料1</OPTION> <OPTION VALUE="2">送料2</OPTION> <OPTION VALUE="3">送料3</OPTION> </SELECT> </TD> </TR> </TABLE> <TABLE BORDER="1"> <TR> <TD BGCOLOR="LIGHTBLUE">個数</TD> <TD BGCOLOR="LIGHTBLUE">商品レンタル期間</TD> <TD BGCOLOR="LIGHTGREY">送料</TD> <TD BGCOLOR="LIGHTGREY">金額</TD> <TD BGCOLOR="LIGHTGREY">税込</TD> </TR> <TR> <TD> <SELECT NAME="count" onchange="CalcAmount(0);"> <OPTION VALUE="0">&nbsp;</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> <TD> <SELECT NAME="term" onchange="CalcAmount(0);"> <OPTION VALUE="0">&nbsp;</OPTION> <OPTION VALUE="1">1泊2日</OPTION> <OPTION VALUE="2">2泊3日</OPTION> <OPTION VALUE="3">3泊4日</OPTION> </SELECT> </TD> <TD> \<INPUT TYPE="TEXT" ID="carriage" CLASS="noborder" VALUE="0" READONLY> </TD> <TD> \<INPUT TYPE="TEXT" NAME="total" CLASS="noborder" VALUE="0" READONLY> </TD> <TD> \<INPUT TYPE="TEXT" NAME="taxin" CLASS="noborder" VALUE="0" READONLY> </TD> </TR> <TR> <TD> <SELECT NAME="count" onchange="CalcAmount(1);"> <OPTION VALUE="0">&nbsp;</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> <TD> <SELECT NAME="term" onchange="CalcAmount(1);"> <OPTION VALUE="0">&nbsp;</OPTION> <OPTION VALUE="1">1泊2日</OPTION> <OPTION VALUE="2">2泊3日</OPTION> <OPTION VALUE="3">3泊4日</OPTION> </SELECT> </TD> <TD> \<INPUT TYPE="TEXT" NAME="carriage" CLASS="noborder" VALUE="0" READONLY> </TD> <TD> \<INPUT TYPE="TEXT" NAME="total" CLASS="noborder" VALUE="0" READONLY> </TD> <TD> \<INPUT TYPE="TEXT" NAME="taxin" CLASS="noborder" VALUE="0" READONLY> </TD> </TR> </TABLE> <BR> 商品単価は500円です。<BR> 送料1を選択すると送料が100円になります。<BR> 送料2を選択すると送料が200円になります。<BR> 送料3を選択すると送料が300円になります。<BR> 個数or商品レンタル期間を選択時に金額計算を行います。<BR> 個数or商品レンタル期間が未入力の場合、金額は0円になります。<BR> 金額は商品単価×個数×レンタル期間倍率＋送料です。<BR> 1泊2日のレンタル期間倍率は1.0です。<BR> 2泊3日のレンタル期間倍率は1.2です。<BR> 3泊4日のレンタル期間倍率は1.4です。<BR> 税込金額は金額×税率(1.05固定)です。<BR> 送料選択時には再計算を行います。<BR> </BODY> </HTML>

ritzkun
質問者

補足

大変、親切にソースを書いていただき恐縮です。 下記内容を補足させていただきます。 まず、せっかく教えていただいて申し訳ないのですが <TABLE BORDER="1"> <TR> <TD BGCOLOR="LIGHTPINK">送料選択</TD> <TD> <SELECT ID="selection" onchange="SelectCarriage();"> <OPTION VALUE="1">送料1</OPTION> <OPTION VALUE="2">送料2</OPTION> <OPTION VALUE="3">送料3</OPTION> </SELECT> </TD> </TR> </TABLE> の部分で、送料は選択ではなくソースを書く際に選択できるように したいです。ユーザー側で選択するのではなく自動計算の式の中に組み込めないかなぁという意味です。 説明不足で申し訳ありません… また、初歩的なことかもわからないのですがtableをつかわなくても大丈夫ですか？ 下記回答にも補足したのですが、自動計算後、PHPで制作したカートへその自動計算後の料金を転送したいのです。 現在のものは、 【個数】と【レンタル期間】を別々にプルダウンで選択して、カートボタンを押すとphpへジャンプします。レンタル期間に料金は含まれるようになっています。 例えば 【2個】【1泊2日\100】と選択するとような感じです。 カートへは 1泊2日　　2個　　200円 ----------------------------- 合計:200円 というような画面になります。 説明不足で申し訳ありませんが教えてください…

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

関連するQ&A

  • javascriptで合計金額を算出したいです。

    はじめまして。javascriptに関しまして、初心者ですので是非教えていただけたら幸いです。 ショッピング用のwebサイトを作成していまして、formを商品名も個数もプルダウンで作成した場合、＜選択した商品＞×＜個数＞の合計金額の算出は可能でしょうか？また合計金額が3万円以上なら送料無料、3万円未満なら送料一律600円という機能も加えたいのですが・・・ ちなみに消費税の計算は大丈夫です。 どなたかわかる方がいましたら、教えていただけると本当に助かります。どうかよろしくお願い致します。

  • 【JavaScript】プルダウンで数字を選択後、即時計算したいですが

    【JavaScript】プルダウンで数字を選択後、即時計算したいですが 方法がわかりません。 http://bunjin.com/java/calc.html 以上のサンプルページでは、チェックボックスを押した直後、 下部のテキストボックスに金額が表示されるように設定されていますが、 チェックボックスの横などにプルダウンで数字を表示させて、 その数字の積を合計金額に表示させたいのです。 例） 「ラーメン（５００円）」のチェックボックスにチェック（合計金額には「500　円」と表示） ↓ その「ラーメン（５００円）」の横にプルダウンボックスを選択(値は1,2,3,・・・) ↓ 選択した値により、合計金額を変化させたい(プルダウンで1を選べば500円、2を選べば1000円、・・・) どうかよろしくお願いします。

  • 検索&計算フォームを作りたい。

    検索&計算フォームを作っていたのですが煮詰まってしまいました。 検索では、プルダウンを使って５つのCSVから１つ選び、その選ばれたCSVの中の1行を 表示させる。 プルダウンは5つの選択肢があり、その5つにそれぞれに子の選択肢がある。 その子の選択肢はCSVの行と連動？している状態にしたい。 （例） AU▽ X-RAY▽ ｜検索｜ 結果 AU X-RAY 10000円 計算では、その表示された行に書かれている数字をプルダウンとチェックボックスで計算する。 というものです。 計算式は　(CSVで検出された金額×プルダウン)－チェックボックス＝値段 （例） AU X-RAY 10000円 S▽ □箱なし □傷あり ｜計算｜ AU X-RAY 8000円 検索フォームはCSVが1つだけなら何とかできたのですが、複数にするにはどうすればいいのか、 わからなくなってしまいました。 fgetcsvで試してみたんですがうまくいきません。 どうか、どなたかご鞭撻宜しくお願いします。

    • 締切済み
    • PHP
  • セレクトメニューで計算

    プルダウンで商品何を選んだら、何円って計算されていく方法がありますよね。 今回、お願いがあります。 予算の関係で、良いレンタルサーバーを借りれませんでした。また、CGIについてそんなに詳しくありませんが、フォームからメール送信をさせることは、できます。これから色々勉強していきたいと思いますが、今回はメール送信する方法をとりたいと思っています。 <OPTION value="3000"> プルダウンで何かを選んだ場合、value="3000"が、メールに表示されます。 しかし、これだと何の商品を選んだかがわかりません。 注文者が選んだ商品を、即計算しながら、なおかつ、フォーム送信された際に、商品名と金額がくっついてくる方法がありますでしょうか。

  • アクセス　レポートのテキストボックス同士の計算

    レポートで集計表を作っていますが、VBAでテキストボックスに入力した数字同士の計算方法がわかりません。 次の様に、月ごとに商品別の売り上げを表示しています。 ---------------------------- ＜1月＞　 商品A 　5個　　500円 商品B 3個　　900円 商品C 1個　　200円 　　　　＜合計○○円＞ ＜2月＞　 商品A 　1個　　100円 商品B 2個　　600円 商品C 2個　　400円 　　　　＜合計○○円＞ ---------------------------- 月・商品名・個数はテーブルの値で、月と商品名をグループにして、個数の合計を表示しています。 金額は、商品ごとの単価が違うので、グループヘッダーの印刷時のイベントプロシージャで設定しています。 select case "商品" case "商品A" 金額 = 個数 * 100 case "商品B" 金額 = 個数 * 300 case "商品C" 金額 = 個数 * 200 end select ここで、この金額の合計を月ごとに求めたいのですが、うまくできません。 Me.合計金額 = DSum("金額", "集計", "月 = '" & Reports!集計!月 & "'") などと入れてみるのですが、全く違う金額が表示されます。 ご指導、宜しくお願いします。

  • ホームページ作成　自動見積計算

    レンタル商品を取り扱うホームページを作成しております。自動的に見積もりを表記するホームページをよく見かけます。エクセルではできるのですが、ホームページとなるとさっぱりわかりません。お知恵を拝借したくお願いいたします。カテゴリの一つ目は、1か月から12カ月等を三角を押すと選べるボタンで選択できて、二つ目は、商品のロットを入力したら掛け算をし、さらに送料に関しても、ロットによって加算できて、消費税を計算できるようなものを作りたいです。どうぞよろしくお願いいたします。

  • 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の加工

    javascriptによる利益額の計算表を作りたいと思い、javascriptを勉強しています まだ勉強中で自分で０から作るのは難しいので、いろいろ検索して、下の質問のANo.5のサンプルを加工してみようと思いました http://okwave.jp/qa/q6963771.html このサンプルだと、このような表になっています この下にプルダウンで選んだ表が作成されます ▼プルダウン ｜(1)材料名｜(2)一人前当たりの材料数｜(3)［入力欄］人前｜(4)合計材料数｜ これに(3)と同じような列を加えた表に加工したいと思っています。 やりたいこととしては、下のような感じです ▼プルダウン ｜(1)商品名｜(2)標準単価｜(3)［入力欄Ａ］個｜(4)［入力欄Ｂ］％｜(4)合計材料数（単価×Ａ×Ｂ）｜ もうすこし説明しますと、 プルダウンで家電フロア・AVフロアなどを選択すると、(1)(2)に商品名・商品の価格が表示 (3)に５個のような共通の台数を入れ、 (4)に８０と入力して８０％の価格で売ると指定 (5)に各商品の標準単価×５個×８０％ （全品５台限り、80％で売ると各商品の合計金額が表示されるというような感じで） こういったものを作りたいと思い、Javascriptの辞典を片手に加工しようとしているのですが、表が表示されなくなってしまったり、(4)の入力欄が表示されなくなってしまったりと苦戦しています。 どのように加工すればよいのか教えてください＞＜

  • ACCESS 2003のフォーム抽出について

    こんにちは、ACCESS2003を使ってスーパーマーケットの商品売り上げ管理を作っています。 テーブル名：売上管理Ｔ 　　　　　（売上日．店舗名．商品名．価格．売上個数．売上合計．割引率） 上記のテーブルをクリエを使って私やパソコンに詳しい人は抽出する事は可能ですが、 パソコンがあまり詳しくない方にも操作出来るようにしたいのです。 そこで、クリエの抽出条件の所に（"条件を入れてね。”とか”店舗店は？”）などダブルコーテーションで括りポップアップで入力出来るようにしました。 クリエ名：売上検索C 売上日　：BETWEEN関数で期間を指定 店舗名　：上野店、新宿店、渋谷店、品川店、 商品名　：とんかつ、コロッケ、アジフライ、から揚げ、など 価格　　：単価 売上個数：数量 売上合計：価格＊売上個数 割引率　：バーゲンや閉店間際の割引を、３０％～７０％設定 　（割引販売分は別途テーブルを作成予定。）） しかし、操作する人に、 ”最初に店舗名、なんて入れたか忘れる。”、”表が小さくて見ずらい”、”紙又はCSV出力できないか？” と言われてしまいました。 そこで、フォームを作成、フォームで表示.印刷しようと思い上記のクリエを基本に作ろうと思いました。 いままで、フォームで抽出条件等を作った事がなく、本屋等を見て廻ったのですが 大半の本が、フォームで新規入力するものばかりで私の意にするものがありませんでした。 ネットを参考に作ってみたのですが、どうもわかりません。 どなたか、構文例を用いて教えてくださいませんか？ ちなみにフォームを以下のように作成しようと思っています。 フォーム名：売上検索Ｆ ＜抽出条件＞ 売上期間　：　”Ａ期間”　～　”B期間”←（売上日） 店舗名　　：　”＊＊店”　　　　　　　 ←（リストボックスorコンボボックスにする予定） 商品名　　：　”とんかつ”　　　　　　 ←（ここは手入力orコンボボックスにする予定） 価格　　　：　”値段”　　　　　　　　 ←（３００円以上の商品を検索する時に使う） 売上個数　：　”個数”　　　　　　　 　←（１００個以上売れた商品を検索する時に使う） 売上合計　：　”売上合計金額”　　　　 ←（販売期間中、１万円以上売れた商品の検索する時に使う） 割引率　　：　”＊＊％””　　　　　　 ←（特売時、割引率を３０％以上を検索する時に使う。レ点で有効、無効を設定したい。） ＜検索結果表示例＞ 売上期間　：　”Ａ期間”　～　”B期間”←（表示のみ） 店舗名　　：　”＊＊店”　　　　　　　 ←（表示のみ） 商品名　　：　”とんかつ”　　　　　　 ←（表示のみ） 価格　　　：　”値段”　　　　　　　　 ←（表示のみ） 売上個数　：　”個数”　　　　　　　 　←（表示のみ） 売上合計　：　”売上合計”　　　　　　 ←（表示のみ） 割引率　　：　”＊＊％””　　　　　　 ←（有効の場合は割引率を表示、無効の場合は０％と表示） 　売上日　：　店舗名　：　商品名　：　価格　：　売上個数　：　売上合計　：割引率 　□□□　　　□□□　　　□□□　　　□□□　　□□□　　　　□□□　　　□□□ 　△△△　　　△△△　　　△△△　　　△△△　　△△△　　　　△△△　　　△△△ 　□□□　　　□□□　　　□□□　　　□□□　　□□□　　　　□□□　　　□□□ 　△△△　　　△△△　　　△△△　　　△△△　　△△△　　　　△△△　　　△△△ この抽出条件の内、１箇所でも入力できていれば”テーブル名：売上管理Ｔ”から抽出するようにしたいんです。 素人の考え方ですいませんが、お知恵を貸してください。よろしくお願いします。

  • 即決の場合の振込みについて！！！

    楽天オークションで商品を落札したとき、何円振り込んでくださいと送料を含めた金額指定がありますよね？ もし、現在価格が1000円のものを1500円で即決してもらって、早期終了してもらった場合は、落札価格は1000円になって振込みの金額指定が1000円+送料となると思いますが、即決価格の1500円+送料を振り込み事はできますか？ よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する