- ベストアンサー
自動計算フォームの使い方と設定方法
- 自動計算フォームを使う方法を解説します。商品サンプル３の行の変更方法も紹介します。
- 商品サンプル３の数量欄をプルダウンメニューから空欄に変更し、金額欄に常に500円が表示される設定方法を教えてください。
- 色々試してみたがうまくいかない。どなたかアドバイスをお願いします！
- 20131129
- お礼率46% (153/327)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
今回の例をなるべく流用するとして price1もしくはprice2に金額がはいっているときだけprice3に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> function keisan(){ var price1 = document.form1.goods1.selectedIndex * 500; document.form1.field1.value = price1; var price2 = document.form1.goods2.selectedIndex * 1000; document.form1.field2.value = price2; var price3 = (price1 || price2) ? 500: 0; 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>送料</td> <td align="right">500円</td> <td> </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>
その他の回答 (1)
- Taiyonoshizuku
- ベストアンサー率37% (183/489)
<tr> <td>送料</td> <td align="right">500円</td> <td></td> <td><input type="text" name="field3" size="8" value="500"> 円</td> </tr> そいでJavaScriptを // 商品3 var price3 = document.form1.field3.value; // 単価を設定 こうすれば言葉通りのものになると思うけど、入力OKだといじられちゃったりするから 500円固定でいいなら <tr> <td>送料</td> <td align="right">500円</td> <td></td> <td>500円</td> </tr> そいでJavaScriptを // 商品3 var price3 = 500; でもいいし var total = price1 + price2 + 500; でもいい。 他にも何通りもあるけど、こんな感じ
お礼
あ、なるほど。var price3 = 500;にしてしまうだけで良いのですね・・・ ありがとうございます いま二重ポストをしてしまいましたが、このサイト、以前は質問するとすぐに反映されたのですが、いまはすぐに質問が出てこなかったのです。そんなわけで２回同じ質問を投稿してしまいました・・・
お礼
ありがとうございます！ やはりできるひとは簡単にできてしますのですね