- ベストアンサー
javascriptで計算フォームを作りたいです
- javascriptとhtmlを組み合わせて計算フォームを作成したいです。具体的には、基本コースとオプション、数量、送料のオプションを組み合わせて計算する式を作りたいです。
- プルダウンメニューを使用し、オプションと送料の選択肢を表示させたいです。オプションの選択によって値段が変わり、送料の有無によっても値段が変わる仕組みです。
- 似たような機能があるサイトを参考にしましたが、横に複数の計算結果を表示させる方法がわかりません。誰か教えていただけると助かります。
- ustar
- お礼率0% (0/5)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんな感じでいかがですか。 <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <html><head><title>計算フォーム</title></head> <script type="text/javascript"> <!-- function chg(){ //数量を確認する。 var num=frm1.elements.opt3.value * 10+frm1.elements.opt4.value*1; //テキストボックスに計算値を反映する。 var result; result=frm1.elements.basic.value*1+frm1.elements.opt1.value*1+frm1.elements.opt2.value*1+frm1.elements.opt5.value*1; result=result*num; frm1.elements.txt1.value =result; } //--> </script> <body > <center><br> <form name="frm1"> <select onChange="chg()" name="basic"> <option value="100">基本コース100円</option> <option value="200">基本コース200円</option> </select> <select onChange="chg()" name="opt1"> <option value="50">オプション1あり</option> <option value="0">オプション1なし</option> </select> <select onChange="chg()" name="opt2"> <option value="50">オプション2あり</option> <option value="0">オプション2なし</option> </select> 数量 <select onChange="chg()" name="opt3"> <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> <option value="6">6 </option> <option value="7">7 </option> <option value="8">8 </option> <option value="9">9 </option> </select> <select onChange="chg()" name="opt4"> <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> <option value="6">6 </option> <option value="7">7 </option> <option value="8">8 </option> <option value="9">9 </option> </select> 個 <select onChange="chg()" name="opt5"> <option value="300">送料オプションあり</option> <option value="0">送料オプションなし</option> </select> <input type="text" name="txt1" ><br> </form> </body> </html>
