自動計算ができる通販フォームについて

このQ&Aのポイント
  • 自動計算ができる通販フォームについての質問です。
  • 既に送信できるところまでできているが、本の項目の計算ができないため、Javaで再現できるかどうか知りたい。
  • 本のタイトルを選択すると400円が加算される仕組みにしたい。
回答を見る
  • ベストアンサー

自動計算ができる通販フォームについて

▼大まかなつくり http://2style.jp/baika/a.html (送信・自動入力機能は外してます) 既に送信できるところまでできているのですが "カード"の部分は計算も送信確認でも問題なしで、"本"の項目がどうにも応用を利かすことができず…果たしてこの仕組みがJavaで作れるのかも分かりません。 cgi関係の方いわく、Javaの問題との事だったので書き込みました。 とりあえず、 value(送信値)に入れた値が送信・表示される仕組みなので、本のタイトルをvalueに入れています。 "一冊目(選択)"と"二冊目(選択)"のvalueにはカードの計算式がとりあえず機能するよう"0"と入っています。(本当は未選択などの文字を入れたいです) 本のタイトルを選択すると400円が加算される仕組みにしたいのですが、Javaで再現できるものなのでしょうか。 お手数ですがご回答の程、よろしくお願いいたします。

  • 00-sx
  • お礼率50% (1/2)

質問者が選んだベストアンサー

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

こんにちは。 一冊目(選択)のvalueを未選択にして動くソースにしました。 price2 = price2 !== "未選択" ? 400 : 0; というところで制御しています。 price2が未選択以外の場合はprice2を400、未選択の場合はprice2を0とする動きです。 function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.options[document.form1.goods1.selectedIndex].value * 500; // 商品2 var price2 = document.form1.goods2.options[document.form1.goods2.selectedIndex].value; price2 = price2 !== "未選択" ? 400 : 0; // 商品3 var price3 = document.form1.goods3.options[document.form1.goods3.selectedIndex].value; price3 = price3 !== "未選択" ? 400 : 0; // 合計を計算 var total = parseInt(price1) + parseInt(price2) + parseInt(price3); // 設定終了 document.form1.field_total.value = total; // 合計を表示 } 試してみてください。

00-sx
質問者

お礼

試してみたところ、思っていた通りの動きをしてくれて感動しました。 浅知恵の自分には出せない答えだったので質問して良かったです。 とても丁寧なご回答、ありがとうございました!

その他の回答 (1)

  • maiko0318
  • ベストアンサー率21% (1483/6970)
回答No.1

まず、訂正を。java と javascript はよく似ていますが、全く別のものです。 商品1で var price1 = document.form1.goods1.options[document.form1.goods1.selectedIndex].value * 500; としてoption value値をとっているなら、 var price2 = document.form1.goods2.options[document.form1.goods2.selectedIndex].value; ここで price2 には"あああ(1)”が入りますよね。 var price2 = document.form1.goods2.options[document.form1.goods2.selectedIndex].value; if(price2 == "あああ(1)") price2 = 400; こうすれば900円表示されましたよ。

00-sx
質問者

補足

>全く別物 カテゴリ選択の際に知りました。イライラさせてしまっていたらすみません。 そしてご指摘頂いたifを用いての書き換え、動いたことは動きました。 ありがとうございます! しかしながら、項目はあああ(1)以外にもあるため複数選択となるとまた変わってくるのかなと検索をしてみて感じたのですが… http://www.red.oit-net.jp/tatsuya/java/Fblink.htm まだ応用できるほど頭が追いつきそうになく、直ぐに答えが出てしまった方はご教授頂ければありがたく思います。何度も申し訳ありません。

関連する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"> ●商品1<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"> ●商品2<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> --------------------------------------------------------

  • ジャバスクリプトで作った自動計算フォームが

    ジャバスクリプトで作った自動計算フォームが 動かなくて困り果ております。 初心者です。御指南のほど、どうぞ宜しくお願いします。 ■ 編集ソース <html> <head> <title>テスト</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 * 2900; document.form1.goods1.options[document.form1.goods1.selectedIndex].value; document.form1.field1.value = price1; // 小計を表示 // 合計を計算 var total = price1 // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>コース名</th> <th>単価</th> <th>数量</th> <th>縁</th> <th>金額</th> </tr> <tr> <td>激安コースA</td> <td align="right">2,900円</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> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select></td> <td><select name="goods1" onchange="keisan()"> <option value="0">額タイプを選択してください</option> <option value="500">タイプ1(500円)</option> <option value="1000">タイプ2(1,000円)</option> <option value="1500">タイプ3(1,500円)</option> </select></td> <td><input type="text" name="field1" size="8" value="0" /> 円</td> </tr> <tr> <td align="right" colspan="4"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form> </body> </html>

  • 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> 上記のテンプレートを参考にさせていただきましたが、このテンプレートだと数値が1~5までしか 選択できません。好きな数字を任意入力できるようにしたいです。  計算結果がすぐに表示されるのは嬉しいですが、 この内容と合わせて更に ・お名前 □□□□ ・連絡先メールアドレス □□□□  これらの要素を、送信ボタンを押して xyz@abcde.co.jpに 内容が届くようにしたいです。 ●送信● ●リセット● の2つのボタンを配置 (送信ボタンを押すと、xyz@abcde.co.jpに以上の項目が記載されたメールが届くようにする) (リセットを押すと入力されたフォームの数値がリセットされる) <p> <input type="submit" value="送信する"> <input type="reset" value="リセット"> </p> 上記の内容を入力することで 送信する/リセット のボタンを作ることはできましたが、 例えばabc@xyz.co.jpに 入力された項目すべてを送信するには 送信する ボタンの後にハイパーリンクを使えばよいのでしょうか。 お手数ですが、ご指南お力添えの程、よろしくお願いしますm(_ _)m

  • フォームメール自動返信について。

    よろしくお願いいたします。 ただいまパールで自動返信機能付きフォームメールをかいております。 入力フォームで入力後 → 確認画面 → 送信完了画面と行く方法で SENDMAILで返信しております。 入力フォームRADIOボタンで「男性」「女性」を設置し ユーザーが選択した「男性」にはA文章 「女性」にはB文章と 言う風にユーザーがフォームで選択した内容で自動返信内容を変更 したいのですが・・・・・ 可能でしょうか? どこで判断させればいいのか・・・ <input name="sex1" type="radio" value="男" /> <input name="sex2" type="radio" value="女" /> としてしまうと RADIOボタンで2つ選択可能になってしまいますし。。 <input name="sex" type="radio" value="男" /> <input name="sex" type="radio" value="女" /> とするとCGIで区別をどうつければよいのやら・・ 初歩的ですみません。 たまに見かける問い合わせフォームで自動返信 必要?不要? のチェックがあるようなCGIの処理と同じ感じになるとおもうのですが・・ どこか参考サイトかアドバイスいただければ幸いです。 よろしくお願いします!

    • ベストアンサー
    • CGI
  • J-PHONEで、うまくフォームの送信ができません

     HP作成の勉強用に、以下のような記述をしましたところ、ブラウザでは、問題なくメール送信できるのですが、手元にあるJ-PHONEで送信ボタンを押すと 「メッセージのフォーマットが正しくありません(REP248」 と表示されてしまいます。METHODはPOST、GET共に試しましたが、結果は同じでした。  また、ENCTYPEも(TEXT/PLAINのみですが)一応試したのですが、やはり結果は同じでした。  何かご存知の方教えて頂けますか<m(__)m> <html>  <head>   <title>NETコンピュータ</title> </head> <body> <p>ネット予約</p> <hr> <form action="mailto:*****@****.ne.jp" method="get"> お名前 <input type="text" size="25"> <p>予約する授業</p> <input type="checkbox" name="予約" value="Word応用">Word応用<br> <input type="checkbox" name="予約" value="LAN基本">LAN基本<br> <input type="checkbox" name="予約" value="HTMLコース">HTMLコース<br> <input type="submit" value="メール送信"> </form> </body> </html>

  • java 計算フォームで未入力の場合ゼロとしたい

    java を使ってweb上で計算フォームを作成しています フォームに数値が入力された場合は問題なく計算結果に反映できますが、未入力のフォームがあると計算結果が反映されません。 未入力のフォームはゼロの値として計算結果を反映させたいのですが、どうしてもできなかったのでお力をお貸頂ければ助かります>< フォームに最初からゼロの値を入れておく方法もあるのですが、ゼロが消された場合は未入力となってしまい計算結果に反映されないので、あくまで未入力の場合はゼロとして計算結果に反映させたいと思っています。 [script LANGUAGE="JavaScript"] function calc() { var s1, s2, s3, s4, ss; s1 = eval(document.form01.txt01.value); s2 = eval(document.form01.txt02.value); s3 = eval(document.form01.txt03.value); ss = s1+s2 +s3; if(ss < 30000) document.form01.txt04.value = ss*0.3; else if(s5 >= 30000) document.form01.txt04.value = ss*0.5; } [/script] <form name="form01"> <input style= type="TEXT" name="txt01" /> <input style= type="TEXT" name="txt02" /> <input style= type="TEXT" name="txt03" /> <input onclick="calc()" type="button" value="計算する" /> <input style= type="TEXT" name="txt04" /> </form> よろしくお願いします

  • フォームの入力チェック

    こんにちは、今回はホームページのワザについて教えて下さい~。 今フォームを作成してアンケートを回答してもらうページを作成中なのですが、そこで躓いてしまいました。 CGIでフォームを作成しているのですが、そのフォームの中の回答で必須項目を作りたいのです。回答していないで送信ボタンを押すとダイヤログが出て「××をご記入ください」のようなメッセージを出す・・・こんなのが理想なのです。 今普通にCGIでフォームだけは完了したのですが、そのチェック機能をjavaでつけても動いてくれないのです(泣)。全くjavaが働かず、普通に送信されてしまいます。 CGIを外してjavaだけでやろうとするとアドレスを予め設定していないという事でエラーになりますし・・・。今は <SCRIPT language="JavaScript"> <!-- function Check(){ if(document.myform.ks.value==""){ alert("必須項目を記入してください。"); return false; } ・ ・ ・ // --> </SCRIPT> </HEAD> <BODY><!--××× CGI Program--> <FORM action=http://www.CGIのテキストまでのパス.txt method=post onSubmit="return Check()"><INPUT type=hidden value=××@×× name=sendto><INPUT type=hidden value=/mail/××.htm name=success><!--ここまで--><A name=TOP></A> としてあります・・・。 すみません!どなたかわかる方!ぜひ教えて下さい、お願いいたします!

    • ベストアンサー
    • HTML
  • javascriptでセレクトメニューの連動と自動計算

    最近、javascriptの勉強をさせてもらっております。javascriptでは自動計算ができると聞き、ハードルが高いとは思うのですが、占い好きの私に以下の事に挑戦させて下さい。 セレクトメニューの連動を使用して、誕生月を選んだら、その月に応じて異なった好きな食べ物のメニューが表示されるという事がまず最初。 そして、誕生月の各月の項目にそれぞれ異なった数字を格納して下の「S」に代入し、それと同じように、食べ物のメニューの項目のそれぞれに3個ワンセットの異なった数字を格納して下の「A,B,C」に代入したいのです。 連動はここまでで、新たに好きな3桁の数字のセレクトメニューと 好きな2桁の数字のセレクトメニューを作り、独自の計算式(1)~(6)を経て、ラッキーナンバーを出すという事をしたいのですが、セレクトメニューの各月の項目に数字を格納というか、その項目を選ぶ事により、そこの項目に設定した数字を計算式に代入させる(Sに代入)やり方が解りません。 同様に食べ物のある項目を選択すると、その項目に設定した3個ワンセットの数字を計算式に代入させる(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>で、 (例えば、3月を選択すると食べ物メニューが出て選択する) 好きな食べ物は <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> です つまり、1月生まれでマグロが好きな場合、選択した時、「S」→「23」「A」→「8」「B」→「24」「C」→「200」を同時に代入させたいです。 ここから下の部分は参考書を元に書いてみました。 私の好きな3桁の数字は <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>で、私の好きな2桁の数字は <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() { // 好きな3桁の数字 var number_1 = parseInt(document.calcuation.number_1[document.calcuation.number_1.selectedIndex].text); // 好きな2桁の数字 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>

  • メーリングリスト 自動的に参加できる仕組み

    こんにちは、 自宅サーバ関係の本を読んでサーバの勉強をしています。 環境:WindowsXP Pro よくメーリングリストの登録で、自分のアドレスを入力して送信すると自動的に返信が帰ってくる仕組みがありますが、仕組みはどうなっているのでしょうか? メールサーバにそういう機能がもともとあるのですか?それともメールサーバとはまた別のプログラムを走らせているのですか? 何かお分かりの方がいましたら教えてください。 よろしくお願いします。

  • jspファイルで注文フォームの合計金額の計算をした

    ショッピングサイトの注文確認画面で商品の個数を変更し、合計金額をページの更新なしに変更して表示するようなページを作りたいのですが、 下記のソースの用にして作るとidが被ってしまい二個目の商品以降が計算できず困っています。 formやinputタグもfor文で回して作っているのでid名も同様になってしまうことが問題だと思うのですが、うまい方法が思いつかず困っています。 どなたかアドバイス頂ければと思います。 javascriptの質問板で書いたほうが良いのかとも思ったのですが、jspファイルなのでjava板で質問させて頂きました。 ソースは下記です。 --------------------------------------------------------------------------------- <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.io.IOException,java.io.PrintWriter,java.sql.Connection,java.sql.DriverManager,java.sql.ResultSet,java.sql.SQLException,java.sql.Statement,java.util.ArrayList,javax.servlet.RequestDispatcher,javax.servlet.ServletException,javax.servlet.annotation.WebServlet,javax.servlet.http.HttpServlet,javax.servlet.http.HttpServletRequest,javax.servlet.http.HttpServletResponse,javax.servlet.http.HttpSession,record.KounyuMeisai"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ショッピングカート</title> </head> <body> <% //セッションからArrayListを取ってくる ArrayList<KounyuMeisai> KounyuList = (ArrayList<KounyuMeisai>) session .getAttribute("KounyuList"); %> <table border=2 width=800 align=center> <caption>【買い物かご】</caption> <tr> <th></th> <th>商品名</th> <th>商品種別</th> <th>商品単価(円)</th> <th>注文数</th> <th>合計(円)</th> <th></th> </tr> <% //繰り返しでArrayListの中身を取ってくる  int i = 0; int kou = 1; int soukei = 0; for (KounyuMeisai k : KounyuList) { if (k.getNum() != 0) { %> <script> function goukei() { document.getElementById("kekka").value=document.getElementById("tanka").value *document.getElementById("kosuu").value; } </script> <tr> <th><%=kou%></th> <th><%=k.getSname()%></th> <th><%=k.getSkind()%></th> <th><input type="text" value =<%=k.getSprice()%> id="tanka" readonly></input> </th> <th><form action="KounyuHenshuServlet" method="post"> <p> <select name="afterNum" onchange=goukei() id=kosuu> <option value=<%=k.getNum()%> selected><%=k.getNum()%></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> </p> </th> <th><input type ="text" value=<%=k.getSprice()*k.getNum() %> id="kekka" readonly></input></th> <th><input type=hidden name=AlistNum value=<%=i%> > <input type="submit" name="button" value="変更"> <input type="submit" name="button" value="削除"> </form></th> </tr> <% soukei += k.getNum() * k.getSprice(); kou++; } i++; } //セッションにアレイリストを入れる。 session.setAttribute("KounyuList", KounyuList); %> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th>総計</th> <th><%=soukei%></th> </tr> </table> <a href="kounyuInput.jsp">買い物を続ける</a> <br> </body> </html>

専門家に質問してみよう