- ベストアンサー
DOM + Javascript について
プルダウンメニューで注文数を変更できるオーダーフォームがあると思いますが、注文数を変更した後、再計算といったボタンでリフレッシュしなければ反映されません。 これをプルダウンを選んだ次点(onChange)で変更した注文数に小計・合計等を再計算したいと思っています。 DOM + Javascriptで可能と思っているのですが、参考になるようなサイトを紹介して頂けないでしょうか？ できれば具体的に行っているところが嬉しいです^^; #プルダウンを選択するとテキスト表示の小計と合計を再計算する。その他<input type=hidden～等も更新したいです。
- select_nao
- お礼率67% (63/93)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
特にDOMを利用する必要はないように思いますが… とりあえず、プルダウンメニューで注文数を指定する形で、プルダウンメニューが選択・変更された時(onChange)に小計・合計を再計算するスクリプトを組んでみました。 こういった形ではいかがでしょうか。 <html> <head> <title></title> <script type="text/javascript"><!-- subsum= new Array(); price= new Array(); price[0]=500;// 商品1の単価 price[1]=1000;// 商品2の単価 price[2]=1500;// 商品3の単価 function totalculc(){ x=document.f1.numof; sum=0; for (i=0; i<x.length; i++){ subsum[i]=price[i]*x[i].value; document.f1.subtotal[i].value=subsum[i]+"円"; sum+=subsum[i]; } document.f1.total.value=sum+"円"; } //--></script> </head> <body> <form name="f1" action="***.cgi" method="post"> <p>商品1：価格500円 / 個数= <select name="numof" onChange="totalculc()"> <option value="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> </select> / 小計：<input type="text" name="subtotal" readonly style="border: none;"> </p> <p>商品2：価格1000円 / 個数= <select name="numof" onChange="totalculc()"> <option value="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> </select> / 小計：<input type="text" name="subtotal" readonly style="border: none;"> </p> <p>商品3：価格1500円 / 個数= <select name="numof" onChange="totalculc()"> <option value="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> </select> / 小計：<input type="text" name="subtotal" readonly style="border: none;"> </p> <p>合計：<input type="text" name="total" readonly style="border: none;"> <input type="submit" value="送信する"> <input type="reset" value="やり直し"></p> </form> </body> </html> 商品の種類については、それぞれの商品ごとのp要素を丸々一つコピーして追加し、またscript要素の商品の単価を入れた配列の要素を追加することで、対応できると思います。 それぞれの注文数のselect要素と、小計のinput要素につけたnameについては、重複させて構いません(というか、そのままにしておかないと、このスクリプトではうまくいきません)。 隠しフォームにデータを送るのであれば、totalculc()関数の中に、隠しフォームに対してデータを書き込むように処理を加えておけばよいでしょう。 DOMを利用するという点の目的が、ちょっとわからなかったのですが、小計などの値を操作されたくないのと、テキストボックスではなくプレーンテキストで表示しているように見せたいということかなと勝手に想像して、それぞれのinput要素にreadonlyを指定し、スタイルシートで境界線を表示しないようにしました。 DOMを利用するという意図がこういうことでなければ、不必要かもしれませんが… こんな感じのものでしょうか? 参考になれば幸いです。 見当違いでしたら、ごめんなさい。
お礼
早速の回答ありがとうございました！ テキストボックスに表示するところまではできていたのですが、外観に違和感がありますし、勝手に数字を変更される心配があり、DOMを使うしかないかなと思っていました。 <input type=text～>をスタイルシートでテキストデータと見せかける事ができるんですね。 大変勉強になりました！