JavaScript自動計算：フォームに数字を選んで自動で合計が表示される仕組みの作り方
- JavaScriptを使用して、フォームにて自動計算を作成する方法について解説します。
- 3つのselectboxから選んだ数字によって合計値が表示される仕組みです。
- コードの書き方が分からず困っている方に対して、具体的な手順をご説明します。
- ベストアンサー
javascript 自動計算
現在フォームにて自動計算を作っています。 簡単にまとめますと3つのselectboxがあり、選んだ数字によって自動で合計がでてくるという仕様です。 例 <select name="score1"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score2"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score3"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p>合計（ここにはscore1とscore2とscore3の合計が表示される）</p> 数字を変えるたびに合計が変わるようにしたです。 valueに値が無い場合はなしと判断する。 コードの書き方がわからず困っています。 お分かりの方がいらっしゃいましたらご教示お願いいたします。
- h-h13
- お礼率24% (37/149)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
選択がない場合、その項目だけ「なし」にするのか、全てをなしにするのか よくわからなかったので、全て選択した場合、計算するようにしてみました。 <script type="text/javascript"><!-- function calculate(){ var score1 = document.getElementById('score1').options[document.getElementById('score1').selectedIndex].value; var score2 = document.getElementById('score2').options[document.getElementById('score2').selectedIndex].value; var score3 = document.getElementById('score3').options[document.getElementById('score3').selectedIndex].value; if(score1 == "" || score2 == "" || score3 == ""){ document.getElementById('result').innerHTML = "なし"; } else{ document.getElementById('result').innerHTML = parseInt(score1) + parseInt(score2) + parseInt(score3); } } --></script> <select name="score1" id="score1" onChange="calculate()"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score2" id="score2" onChange="calculate()"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score3" id="score3" onChange="calculate()"> <option value="">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p id="result">合計（ここにはscore1とscore2とscore3の合計が表示される）</p> 各セレクトボックスには、それぞれidとonchangeを入れています。 p要素にもidを入れています。
その他の回答 (2)
- mikemike7
- ベストアンサー率87% (97/111)
> 選択がない場合は全てなしではなくその項目だけ「なし」になるということです。 #1のJavaScript部分だけ変更します。 <script type="text/javascript"><!-- function calculate(){ var score1 = parseInt(document.getElementById('score1').options[document.getElementById('score1').selectedIndex].value); var score2 = parseInt(document.getElementById('score2').options[document.getElementById('score2').selectedIndex].value); var score3 = parseInt(document.getElementById('score3').options[document.getElementById('score3').selectedIndex].value); if(isNaN(score1)){score1 = 0;} if(isNaN(score2)){score2 = 0;} if(isNaN(score3)){score3 = 0;} document.getElementById('result').innerHTML = score1 + score2 + score3; } --></script> これで試してみてください。
- babu_baboo
- ベストアンサー率51% (268/525)
よがあけた。もうねようっとおもいつつ。 すべてがちぐはぐになった。 ふぃあ～ふぉっくすならうごくかも！？ ぜんかくくうはくは、はんかくに。 <!DOCTYPE html> <title></title> <body> <div> <select name="score1" onchange="hoge()"> <option value="a">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score2" onchange="hoge()"> <option value="b">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <br> <select name="score3" onchange="hoge()"> <option value="c">-</option> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <p>合計（ここにはscore1とscore2とscore3の合計が表示される）</p> </div> <script type="application/javascript; version=1.8"> const addNum = (function ({ flag, total }, { value }) isNaN (value) ? { flag : true, total: total } : { flag : flag, total: total + Number (value) }); const hoge = (function () { let elements = document.querySelectorAll ('select[name^="score"]'); let result = Array.reduce (elements, addNum, { flag: false, total: 0 }); let target = document.querySelector ('p').firstChild; target.nodeValue = (result.flag) ? 'valueに値が１つでも無い場合は、なしと判断' : '合計 ' + result.total; }); </script>
お礼
夜遅くに有難う御座います。 #1の方のコードがわかりやすかったため、そちらを参考にさせていただきました。 お忙しい中、ご教示いただいたにも関わらず申し訳ありません。 また、わからないことなどがありましたら、宜しくお願いいたします。
関連するQ&A
- メールフォーム内の自動計算 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> --------------------------------------------------------
- ベストアンサー
- JavaScript
- まったく同じ<select>フォームの値を連動させたい
まったく同じ<select>フォームの値を連動させたい ptpで下記のようなコードがあり、まったく同じselectフォームの値を常に連動させるにはどうしたらよいでしょうか。 本当は、ひとつのform内に二つのSubmitボタンがあってはならないような話を聞いたことがありますが・・・ <html> <head> </head> <body> <?php $btn = "<select name='sorttype'>"; $btn .= "<option value='0'>氏名</option>"; $btn .= "<option value='1'>年齢</option>"; $btn .= "<option value='2'>電話番号</option>"; $btn .= "</select>"; $btn .= "<input type='submit' name='exec' value='保存'>"; ?> <form> <?= $btn ?> ああああ<br> いいいい<br> うううう<br> <?= $btn ?> </form> </body> </html>
- ベストアンサー
- JavaScript
- javascriptでの完全一致による表記（３）
前回、以下の質問に対して素晴らしいコードをお教えいただきました。 ホームページに組み込みを行っている最中にどうしても追加したい機能がありまして。 下部のコードは、以下の仕組みになっています。 往路⇒【東京】→【名古屋】＝＜単価＞＊【枚数】＝＜合計＞ 復路⇒【名古屋】→【東京】＝＜単価＞＊【枚数】＝＜合計＞ 【支払方法＊１】＝＜割引額＞ 往路+復路-割引額＝＜合計金額＞ ＊１：銀行振込と代金引換があり、銀行振込を選択しますと、割引が行われる仕組みです。 組み込みたいと思っている機能ですが、銀行振込を選択しますと、100円引きになっていますが、 銀行振込を選択した場合、1枚毎に100円割引をしたいです。 以下のような感じです。 （往路枚数＋復路枚数）＊100⇒往路合計+復路合計-割引額＝合計 特にフォームを追加したいとかではありません。 割引額を表示するフォームに「（往路枚数＋復路枚数）＊100」この計算を表示し、 総合計に往路合計+復路合計-割引額を表示したいです。 JavaScriptにお詳しい方、何卒、よろしくお願いいたします。 ↓以下コード↓ <script type="text/javascript"><!-- var ryoukinhyo={ "東京":{ "名古屋":{ "自由席":{"価格":100} } }, "名古屋":{ "東京":{ "自由席":{"価格":100} } } } var waribikihyo={ "銀行振込":100, "代金引換":0 } function check(f){ var shuppatu=f.shuppatu.value; var touchaku=f.touchaku.value; var shubetu =f.shubetu.value; var paytype =f.paytype.value; var maisu =parseInt(f.maisu.value); var maisu2 =parseInt(f.maisu2.value); var tanka =f.tanka; var tanka2 =f.tanka2; var waribiki = f.waribiki; var goukei =f.goukei; var p2 = 0; if(!shuppatu || !touchaku || !shubetu || !paytype || !maisu) return false; var p=(!ryoukinhyo[shuppatu] || !ryoukinhyo[shuppatu][touchaku] || !ryoukinhyo[shuppatu][touchaku][shubetu])?false:ryoukinhyo[shuppatu][touchaku][shubetu]["価格"]*maisu; if(p) { tanka.value=p.toString(); if(f.shuppatu2.value && f.touchaku2.value && f.shubetu2.value && maisu2){ p2=(!ryoukinhyo[f.shuppatu2.value] || !ryoukinhyo[f.shuppatu2.value ][f.touchaku2.value] || !ryoukinhyo[f.shuppatu2.value][f.touchaku2.value][f.shubetu2.value])?false:ryoukinhyo[f.shuppatu2.value][f.touchaku2.value][f.shubetu2.value]["価格"]*maisu2; if(p2){tanka2.value=p2.toString();} } if(waribikihyo[paytype]){ waribiki.value=waribikihyo[paytype].toString(); }else{ waribiki.value="割引はありません"; } goukei.value=(p + p2 - waribikihyo[paytype]).toString(); }else{ tanka.value="0"; waribiki.value="割引はありません"; goukei.value="【この区間は、販売しておりません】"; } } --></script> <form> 往路：<select name="shuppatu" onchange="check(this.form)"> <option value="">出発選択</option> <option value="東京">東京</option> <option value="名古屋">名古屋</option> </select> <select name="touchaku" onchange="check(this.form)"> <option value="">到着選択</option> <option value="名古屋">名古屋</option> <option value="東京">東京</option> </select> <select name="shubetu" onchange="check(this.form)"> <option value="">種別選択</option> <option value="自由席">自由席</option> </select> <select name="maisu" onchange="check(this.form)"> <option value="1">1</option> <option value="2">2</option> </select><br> 復路：<select name="shuppatu2" onchange="check(this.form)"> <option value="">出発選択</option> <option value="東京">東京</option> <option value="名古屋">名古屋</option> </select> <select name="touchaku2" onchange="check(this.form)"> <option value="">到着選択</option> <option value="名古屋">名古屋</option> <option value="東京">東京</option> </select> <select name="shubetu2" onchange="check(this.form)"> <option value="">種別選択</option> <option value="自由席">自由席</option> </select> <select name="maisu2" onchange="check(this.form)"> <option value="1">1</option> <option value="2">2</option> </select><br> <select name="paytype" onchange="check(this.form)"> <option value="">支払選択</option> <option value="銀行振込">銀行振込</option> <option value="代金引換">代金引換</option> </select> <div>往路合計：<input type="text" name="tanka" value="0" /> + 復路合計：<input type="text" name="tanka2" value="0" /> - 割引：<input type="text" name="waribiki" value="0" /> ＝ 合計：<input type="text" name="goukei" /></div> </form>
- 締切済み
- JavaScript
- javascript 計算フォーム
見積フォームを作っているのですがjavascript に精通してないので詳しい方教えて頂けますか。 下記のようにnew Arrayで値を取得してますが３つ目の項目”メーカー名”はどれを選んでも金額は同じなので簡単に記述出来ないでしょうか？ 合計金額取得後ＣＧＩに送信したいので項目名は必要です。 いろいろ検索してみましたが私のスキルでは解決できないのでよろしくお願いします。 ちなみにjavascriptの 計算フォームは部品の共存（セレクトメニューとラジオボタンなど）は出来ませんよね。 ======================================== <html> <head> </head> <script language="javascript"> <!-- n_table1 = new Array(30000,20000,18000,9000); n_table2 = new Array(8000,14800,6980); n_table3 = new Array(3000,3000,3000,3000,3000,3000,3000,3000,3000,3000,3000,3000); function keisan(obj) { var outStr=""; var total=0; total = total + n_table1[document.form1.koumoku1.selectedIndex]; total = total + n_table2[document.form1.koumoku2.selectedIndex]; total = total + n_table3[document.form1.koumoku3.selectedIndex]; outStr = "合計 : ￥" + total; document.form2.outbox.value=outStr; } // --> </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> ========================================
- ベストアンサー
- JavaScript
- javascriptでセレクトメニューの連動と自動計算
最近、javascriptの勉強をさせてもらっております。javascriptでは自動計算ができると聞き、ハードルが高いとは思うのですが、占い好きの私に以下の事に挑戦させて下さい。 セレクトメニューの連動を使用して、誕生月を選んだら、その月に応じて異なった好きな食べ物のメニューが表示されるという事がまず最初。 そして、誕生月の各月の項目にそれぞれ異なった数字を格納して下の「S」に代入し、それと同じように、食べ物のメニューの項目のそれぞれに３個ワンセットの異なった数字を格納して下の「A,B,C」に代入したいのです。 連動はここまでで、新たに好きな３桁の数字のセレクトメニューと 好きな２桁の数字のセレクトメニューを作り、独自の計算式(1)～(6)を経て、ラッキーナンバーを出すという事をしたいのですが、セレクトメニューの各月の項目に数字を格納というか、その項目を選ぶ事により、そこの項目に設定した数字を計算式に代入させる(Sに代入)やり方が解りません。 同様に食べ物のある項目を選択すると、その項目に設定した３個ワンセットの数字を計算式に代入させる(A,B,Cに代入)やり方が解りません。 解る部分は、ある書物を参考にして書いてみましたが、つなぎ合わせた感じになってしまって、すみません。そして説明の仕方がややこしくなってしまいましたがよろしくお願いします。(独自の計算式(1)～(6)の内容は気にしないで下さい) ---------------------------------------------------------------- <html> <head> <title>あなたのラッキーナンバー</title> </head> <body> <form name="calcuation"> //セレクトメニューの連動部分が解りません。こんな感じにしたいのですが。 私の誕生月は <select name="month" onChange="calculation();"> <option value="23">1月 // ここには数字の「23(Sに代入)」が格納されている <option value="12">2月 // ここには数字の「12(Sに代入)」が格納されている <option value="56">3月 <option value="89">4月 <option value="5" selected>5月 <option value="88">6月 <option value="70">7月 <option value="">8月 <option value="">9月 <option value="">10月 <option value="">11月 <option value="">12月 </select>で、 (例えば、３月を選択すると食べ物メニューが出て選択する) 好きな食べ物は <select name="food" onChange="calculation();"> <option>トマト <option value="8,24,200">マグロ //ここには数字の「8,24,200(A,B,Cにワンセットでそれぞれに代入)」が格納されている <option value="2,205,1555">みかん //ここには数字の「2,205,1555(A,B,Cにワンセットでそれぞれに代入)」が格納されている <option>納豆 <option selected>豆腐 <option>ラーメン </select> です つまり、１月生まれでマグロが好きな場合、選択した時、「S」→「23」「A」→「8」「B」→「24」「C」→「200」を同時に代入させたいです。 ここから下の部分は参考書を元に書いてみました。 私の好きな３桁の数字は <select name="number_1" onChange="calculation();"> <option>100 <option>200 <option>300 <option>400 <option selected>500 <option>600 <option>700 <option>800 <option>900 </select>で、私の好きな２桁の数字は <select name="number_2" onChange="calculation();"> <option>10 <option>20 <option>30 <option>40 <option selected>50 <option>60 <option>70 <option>80 <option>90 </select> あなたのラッキーナンバーは<input type="text" name="number_luckey" class="text_color" value="0" size="8" maxlength="6">です。 </form> </body> </html> <script type="text/javascript"> // この辺に何かの記述が必要ですよね。 function calculation() { // 好きな３桁の数字 var number_1 = parseInt(document.calcuation.number_1[document.calcuation.number_1.selectedIndex].text); // 好きな２桁の数字 var number_2 = parseInt(document.calcuation.number_2[document.calcuation.number_2.selectedIndex].text); // 独自の計算式(1) var number_3 = number_2 * 365; // 独自の計算式(2) var number_4 = (number_3 / A) - S; // 独自の計算式(3) var number_5 = number_4 / B; // 独自の計算式(4) var number_6 = number_5 * C; // 独自の計算式(5) var number_7 = number_1 * number_2 / 20 * 365; // 独自の計算式(6) var number_luckey = number_7 - number_6; document.calcuation.number_luckey.value = number_luckey; return; } </script>
- 締切済み
- JavaScript
- javascriptについての質問です。複数の一つのselect等で選
javascriptについての質問です。複数の一つのselect等で選択した文字の値をinputに表示したいのですが <FORM> <SELECT NAME="select1"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" a">a</OPTION> <OPTION VALUE=" b">b</OPTION> <OPTION VALUE=" c"c</OPTION> </SELECT> <SELECT NAME="select2"> <OPTION VALUE=""></OPTION> <OPTION VALUE=" 壱">壱</OPTION> <OPTION VALUE=" 弐">弐</OPTION> <OPTION VALUE=" 参">参</OPTION> </SELECT> <input TYPE="text" NAME="text1" VALUE=""> </FORM> とこの様なフォームがあるとしまして 各SELECT で選択した各文字を <input TYPE="text" NAME="text1" VALUE="">に追加したいんです。 SELECT一つなら出来たのですが 複数になると追加をどうするのかやり方がわからなくて・・・ 一つのセレクトは一つしか選択できなくなればなお良いのですが・・・ どなたがご教授願えないでしょうか?
- ベストアンサー
- JavaScript
- JavaScriptの入力フォーム
入力フォームについて、option valueを複数指定したいのですが、どうすればいいのでしょうか？ 例えば、ホビーを選択した際に"Hobbies"と"12345"という値が欲しいです。 カテゴリー選択 <select name="category"> <option value="Hobbies">ホビー</option> <option value="HomeImprovement">DIY用品</option> <option value="Jewelry">ジュエリー</option> …… </select>
- ベストアンサー
- JavaScript
- 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で、SELECTの値で、TEXTを入力可と入力不可
JavaScriptで、SELECTの値で、TEXTを入力可と入力不可に分けたい。 現在、以下のフォームを作成しています。 <form method="post" action="/" name="formname"> <select name="test[0]" size="1" onchange="selectChange(0)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <select name="test[1]" size="1" onchange="selectChange(1)"> <option value="A" selected>A</option> <option value="B" >B</option> <option value="C" >C</option> <option value="D" >D</option> </select> <br> <input name="txt[0]" type="text" value="" size="10"> <br> <input name="txt[1]" type="text" value="" size="10"> </form> このフォームで、例えば、selectのtest[0]でvalueの「C」が選択された場合、 txt[0]が入力できないようにしたいと考えています。 また同様に、test[1]でvalueの「C」が選択された場合は、txt[1]が入力出来ないように したいです。 以下のようなJavaScriptを書きましたが、上手く動きません。 function selectChange(value) { var answer = document.formname.elements["test[value]"].selectedIndex; if(answer == "C") { document.formname.elemens["txt[value]"].disabled = false; } else { document.formname.elemens["txt[value]"].disabled = true; } } どなたか教授頂けましたら、幸いです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトメニューが・・・
CGIでHPをつくり、そのHPから入力HPへ飛びフォームの値をもとのHPに返すということをやっているのですが、ここで、セレクトメニューのvalueの値によってはそこのHPから入力のHPに飛べなくなるという現象がおきてます。 １部ですが、例を示すと・・・ print "<select name='place'>"; print "<option value='aaa：3821'>aaa</option>"; print "<option value='bbb3822'>bbb</option>"; print "<option value='ccc：3801'>ccc</option>"; print "<option value='ddd：3802'>ddd</option>"; print "</select>"; print "<br>"; となっていて、ここで小文字と数字の間に[\n]を１つでも入れるとエラーにはならずしっかり飛ぶことができますが、今のように全て文字と数字だけではなぜかエラーが起こってしまっています・・・ なぜなんでしょうか・・・・？
- 締切済み
- CGI
お礼
お忙しい中、ご回答有難う御座います。 遅くなりましたが、できました。 > 選択がない場合、その項目だけ「なし」にするのか、全てをなしにするのか > よくわからなかったので、全て選択した場合、計算するようにしてみました。 とありましたが、選択がない場合は全てなしではなくその項目だけ「なし」になるということです。 なしというよりも0がプラスされるということです。 現在それを改変しているのですが、できず困ってしまいました。 そちらの改変もご教示いただいてもよろしいでしょうか？