• 締切済み

html:計算フォームを組み込みフォーム作成したい

htmlのフォームで、計算フォーム（掛け算）を組み込んだフォームを作成したいです。 ◆◆◆単価 ＊ ■■■数量 ＝ 合計額☆☆☆ 単価の◆は予めサイト側で指定 数量の■はページ閲覧者の 任意入力 合計額の☆☆☆ は 自動で計算された答えが出力される <html> <head> <title>TAG index Webサイト</title> <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 type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定 document.form1.field1.value = price1; // 小計を表示 // 商品2 var price2 = document.form1.goods2.selectedIndex * 1000; // 単価を設定 document.form1.field2.value = price2; // 小計を表示 // 商品3 var price3 = document.form1.goods3.selectedIndex * 3000; // 単価を設定 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>商品サンプル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
  • 回答数1
  • ありがとう数1

みんなの回答

  • LancerVII
  • ベストアンサー率51% (1060/2054)
回答No.1

こんにちは。 数値の任意入力は <select name="goods2" onChange="keisan()"> ～中略～ </select> <input type="text" name="goods2" onchange="keisan();"> に変更すれば入力欄が出来ます。 幅等はsize="x"(xは任意の整数)やスタイルシートで調整できます。 お名前、メールアドレスは <input type="text" name="onamae"> <input type="text" name="mailaddress"> を任意の場所に追加すれば入力欄が出来ます。 ただ、指定のメールアドレスに送信するにはサーバ側での処理が必要になります。 クライアント側のみでも出来ないことは無いですが、使えない人もいますのでおすすめ出来ません。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する