ベストアンサー

javascript 計算フォーム

2010/02/23 16:08

見積フォームを作っているのですがjavascript に精通してないので詳しい方教えて頂けますか。下記のようにnew Arrayで値を取得してますが３つ目の項目”メーカー名”はどれを選んでも金額は同じなので簡単に記述出来ないでしょうか？合計金額取得後ＣＧＩに送信したいので項目名は必要です。いろいろ検索してみましたが私のスキルでは解決できないのでよろしくお願いします。ちなみにjavascriptの計算フォームは部品の共存（セレクトメニューとラジオボタンなど）は出来ませんよね。 ======================================== <html> <head> </head> <script language="javascript">  </script> <body> <center> <br> <form name="form1" METHOD="POST"> <table cellspacing="0" cellpadding="8" border="1" bordercolor="#FFA828"> <tr> <td>商品　Ａ</td> <td> <select name="koumoku1"> <option>Pentium <option>Celeron <option>Athlon <option>Duron </select> </td> </tr> <tr> <td>商品　Ｂ</td> <td> <select name="koumoku2"> <option>F2MX200 <option>LE Ultra <option>Kyro </select> </td> </tr> <tr> <td>メーカー名</td> <td> <select name="koumoku3"> <option>Ａ社 <option>Ｂ社 <option>Ｃ社 <option>Ｄ社 <option>Ｅ社 <option>Ｆ社 <option>Ｇ社 <option>Ｈ社 <option>Ｉ社 <option>Ｊ社 <option>Ｋ社 <option>Ｌ社 </select> </td> </tr> </table> <p> <input type="button" value="計算する" onClick="keisan(this.form)"> </form> <p><br> <form name="form2"> <TEXTAREA NAME="outbox" rows=1 cols=36 wrap="soft"> 計算結果表示 </textarea> </form> </center> </body> </html> ========================================

Naodes
お礼率25% (10/40)

JavaScript
回答数3
ありがとう数4

みんなの回答 （3）
専門家の回答

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

ベストアンサー

askaaska
ベストアンサー率35% (1455/4149)

2010/02/23 16:30 回答No.1

全社同じなら、それって単純に配列使わなければいいだけじゃない？ > n_table3 = 3000; > total = total + n_table3; 選択にかかわらずこうなるだけでしょ？配列にするということは、どこか一箇所が別の金額になる可能性があるからなんじゃないの？それがないなら配列にする必要性はないわ。文字数を減らしたいだけなら n_table1 = new Array(30000,20000,18000,9000); を n_table1 = [30000,20000,18000,9000]; と書けばできるけど。

質問者

補足 2010/02/24 20:20

new Array　は無くてもいいんですね。参考になりました。無料配布のスクリプトをそのまま使用しているのですが new Array　と指定したのはなにか意味があったのか？

その他の回答 (2)

yambejp
ベストアンサー率51% (3827/7415)

2010/02/23 20:16 回答No.3

普通、やるならこんな感じで、対比表をつくってやりますね。おそらくn_table3も、ある場合だけ3000以外になるかもしれないということですよね？ <script> n_table1 = {"Pentium":30000,"Celeron":20000,"Athlon":18000,"Duron":9000}; n_table2 = {"F2MX200":8000,"LE Ultra":14800,"Kyro":6980}; n_table3 =new Object(); var koumoku3list=["a","b","c","d","e","f","g","h","i","j","k","l"]; for(var i in koumoku3list){ n_table3[koumoku3list[i]]=3000; } function keisan(f) { var outStr=""; var total=0; total += n_table1[f.elements["koumoku1"].value]; total += n_table2[f.elements["koumoku2"].value]; total += 3000; outStr = "合計 : ￥" + total; document.getElementById("form2").elements["outbox"].value=outStr; } </script> <style> .ie{ text-align:center; } .ie table{ width:auto; margin:auto; } #table1{ border-collapse:collapse; } #table1 td{ border:1px solid #FFA828; padding:8px; } </style> <div class="ie"> <form id="form1" METHOD="POST"> <table id="table1"> <tr> <td>商品　Ａ</td> <td> <select name="koumoku1"> <option value="Pentium">Pentium</option> <option value="Celeron">Celeron</option> <option value="Athlon">Athlon</option> <option value="Duron">Duron</option> </select> </td> </tr> <tr> <td>商品　Ｂ</td> <td> <select name="koumoku2"> <option value="F2MX200">F2MX200</option> <option value="LE Ultra">LE Ultra</option> <option value="Kyro">Kyro</option> </select> </td> </tr> <tr> <td>メーカー名</td> <td> <select name="koumoku3"> <option value="a">Ａ社</option> <option value="b">Ｂ社</option> <option value="c">Ｃ社</option> <option value="d">Ｄ社</option> <option value="e">Ｅ社</option> <option value="f">Ｆ社</option> <option value="g">Ｇ社</option> <option value="h">Ｈ社</option> <option value="i">Ｉ社</option> <option value="j">Ｊ社</option> <option value="k">Ｋ社</option> <option value="l">Ｌ社</option> </select> </td> </tr> </table> <input type="button" value="計算する" onClick="keisan(this.form)"> </form> <form id="form2"> <TEXTAREA NAME="outbox" rows=1 cols=36 wrap="soft"> 計算結果表示 </textarea> </form> </div>

質問者

お礼 2010/02/24 20:19

n_table3の価格は変動する事もあります。丁寧な説明ありがとうございました。

fujillin
ベストアンサー率61% (1594/2576)

2010/02/23 17:04 回答No.2

よくわからないけど… わざわざ計算しなければよいのでは？　total = total + n_table3[～～]　を　total += 3000; みたいに固定しちゃえば、配列そのものが不要になります。＞ＣＧＩに送信したいので項目名は必要です余計なお世話かもしれないけれど、サーバに送るのなら、form1の内容だけ送信して、スクリプトでの計算は表示用に限定しておいたほうがよろしいかと… 金額はサーバ側で計算し直すことをお勧めします。（送信データは偽れるので）おまけに、現状だと、ソースを見れば価格設定が丸見えだけれど、かまわないのかなぁ…

関連するQ&A

チェックボックスとの連動
白黒とカラーの項目を連動させています。例えば白黒のチェックをはずしてカラーにチェックを入れるとすでに白黒で選択してた場合、金額が合計に加算されてしまいます。チェックをはずした時点で選択項目の金額をリセットさせたいのですが解決方法が見つかりません。Javascript勉強中で正直よくわかっていません。下記スクリプトもあっちこっち調べながら組み合わせたものです。解決策をいただけると助かります。よろしくお願い致します。 <script language="javascript">  </script> <form name="form1" METHOD="POST"> <table cellspacing="0" cellpadding="8" border="1" bordercolor="#666"> <tr> <td>白黒</td> <td><input type=checkbox name="idcheck" id="idcheck" onClick="ctrl_check01(this.checked);"> 白黒 <select name="koumoku1"> <option>選択 <option>--------------A(100) <option>--------------B(200) </select> </tr> <tr> <td>カラー</td> <td><input type=checkbox name="idcheck2" id="idcheck2" onClick="ctrl_check03(this.checked);"> カラー <select name="koumoku2"> <option>選択 <option>--------------A(300) <option>--------------B(400) </select></td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <td>総枚数</td> <td><input type="text" name="kazu1" size="8" maxlength="12" value="0"> 枚</td> </tr> <tr> <td colspan="2"></td> </tr> <tr> <td>合計</td> <td><input type="text" name="goukei" size="8" maxlength="12" value="0"> 円</td> </tr> </table> <input type="button" value="計算する" onClick="keisan(this.form)"> </form>
- ベストアンサー
- 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">  </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
javascriptがIEで機能しない
ヘッダー内 <script language="JavaScript">  </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択１</option> <option>選択２</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択１を選択しても非表示のままですどこを修正してやればいいでしょうか？ぜひ御指南ください。
- ベストアンサー
- JavaScript
１ページで２つのフォームをチェックしたいのですが…
１つのページに同じ項目のフォームを２つ作りました。そしてそれにチェックを設けたいと思いフォームチェックのスクリプトを入れてみました。が、しかし、、上のフォームはチェックが動くのですが、下のフォームは何を入れてもチェックがエラー検出をして次のページに進めなくなってしまいます。。こちらはどのようにしたら両方のチェックが働きつつ次のページに値を渡せるのでしょうか？正しい書き方を教えてください。よろしくお願いします。 <html> <head> <script language="JavaScript">  </script> </head> <body> <form action="inquiry.php" method="post" onsubmit="return chkInputForm()"> <table class="table" summary="お問合せテーブル"> <tbody><tr> <th>１か２</th> <td> <select name="part" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">１</option> <option value="2">２</option> </select> </td> </tr> <tr> <th>住まいは</th> <td> <select name="pref" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">日本</option> <option value="2">海外</option> </select> </td> </tr> </tbody></table> <input class="iepng" name="button" value="送信" type="submit"> </form> <form action="inquiry.php" method="post" onsubmit="return chkInputForm()"> <table class="table" summary="お問合せテーブル"> <tbody><tr> <th>１か２</th> <td> <select name="part" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">１</option> <option value="2">２</option> </select> </td> </tr> <tr> <th>住まいは</th> <td> <select name="pref" style="width: 200px;"> <option value="0">---ご選択下さい---</option> <option value="1">日本</option> <option value="2">海外</option> </select> </td> </tr> </tbody></table> <input class="iepng" name="button" value="送信" type="submit"> </form> </body> </html>
- 締切済み
- HTML
ジャバスクリプトで作った自動計算フォームが
ジャバスクリプトで作った自動計算フォームが動かなくて困り果ております。初心者です。御指南のほど、どうぞ宜しくお願いします。 ■　編集ソース <html> <head> <title>テスト</title> <style type="text/css">  </style> <script type="text/javascript">  </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
html:計算フォームを組み込みフォーム作成したい
htmlのフォームで、計算フォーム（掛け算）を組み込んだフォームを作成したいです。 ◆◆◆単価＊ ■■■数量＝合計額☆☆☆ 単価の◆は予めサイト側で指定数量の■はページ閲覧者の任意入力合計額の☆☆☆ は自動で計算された答えが出力される <html> <head> <title>TAG index Webサイト</title> <style type="text/css">  </style> <script type="text/javascript">  </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
セレクトボックスを使ったJavaScriptでの計算方法
セレクトボックスから名前を選択して計算する方法を教えてください。 HTMLとJavaScriptは別に分けます。 ----------.html---------- <table border="1"> <tr><td>武器</td> <td><form name="myForm"> <select name="Item" size="1" tabindex="0"> <option value="0">あああああ</option> <option value="1">いいいいい</option> <option value="2">ううううう</option> 　　　　　・　　　　　・　　　　　・　　　　　・　　　　　・ </select> </td></tr> <tr><td>OP1</td> <td> <select name="OP1" size="1" tabindex="0"> <option value="0">AAAAA</option> <option value="1">BBBBB</option> <option value="2">CCCCC</option> 　　　　　・　　　　　・　　　　　・　　　　　・　　　　　・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option> 　　　　　・　　　　　・　　　　　・　　　　　・　　　　　・ </select> </td></tr> <tr><td>OP2</td> <td> <select name="OP2" size="1" tabindex="0"> <option value="0">aaaaa</option> <option value="0">bbbbb</option> <option value="0">ccccc</option> 　　　　　・　　　　　・　　　　　・　　　　　・　　　　　・ </select> </td></tr> <tr><td colspan="2" align="center"> <input type="button" value="計算する" onclick="Calculation()"> <input type="reset" name="リセット" value="リセット"> </form> </td></tr> <tr><td colspan="2" align="center"> <form name="TxtArea"><input type="text" name="myResult" size="20"> </form> </td></tr> </table> .jsではItemをbox1、OP1をbox2、OP3をbox3、OP3をbox4としています。 box1[0]=10; box1[1]=15; といった感じです。全部足し算で計算します。どのようにすれば計算できるのかJavaScriptについて書かれてるページを見たのですが理解できなかったのでよろしくお願いします。
- ベストアンサー
- 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
自動計算について教えてください
http://www.tagindex.com/javascript/form/comp1b.html に自動計算フォームがあります。ソースは以下です。やりたいのは、商品サンプル３の行の変更です。この行だけ、商品名と単価の欄はそのままで、数量欄のプルダウンメニューをなくして空欄にして、金額欄に常に　500 が表示され、合計に加算されるようにしたいのです。（商品サンプル３を送料に変更したいのです。送料は注文数によって変更されず、常に500円という設定です）色々やってみたのですが、どうやってもできません。・・どなたかアドバイスお願いいたします！ <style type="text/css">  </style> <script type="text/javascript">  </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

javascript 計算フォーム