• 締切済み

フリーのカートCGIを基にカスタマイズしているのですが、どうしても解決

フリーのカートCGIを基にカスタマイズしているのですが、どうしても解決できない問題が出て困っています。 チェックボックスの「VALUE」で複数の値を設定し、それを分割させて反映したいのですが、どうしても出来ません。 【HTML】 <INPUT TYPE = "checkbox" NAME = "option1" VALUE = "オプション1,5000" /> オプション1を追加(+¥5,000円)   <INPUT TYPE = "checkbox" NAME = "option2" VALUE = "オプション2,2500" /> オプション2追加(+¥2,500円) 【CGI】 print <<EOM; <th class="th1">オプション</th> <th class="th1">合計</th> my (%option1name,%option1price); @furirua = split(/,/ , option1); $option1name = $option1[0]; $option1price = $option1[1]; my (%furirubname,%furirubprice); @option2 = split(/,/ , option2); $option2name = $option2[0]; $option2price = $option2[1]; print "<td align=\"center\" class=\"td1\">$option1name<br>$option2name</td>"; my $kei2 = ($price{$code} + $option1price + $option2price) * $num; my $kei3 = &comma($kei2); print "<td align=\"right\" class=\"td2\">$kei3円</td>"; VALUEの最初の値は「オプション名」次が「価格」です。(項目は「製品名」等他にもあります) カート内でそれぞれに分かれて、「オプション名」は「オプション」の項目内に、 「価格」は本体価格($price{$code})と合計して個数($num)で掛けた値を「合計」出す。 上記のやり方だと、「オプション」の項目に、オプション1のVALUEが2つとも表示されてしまいます。 また一つだけ選ぶと、減った分?VALUEの項目がずれてしまいました。 こんな状態です。 【例】 <th class="th1">オプション</th> <td>オプション1<br>5000</td> オプション2の内容は次の項目に反映されてしまいます。 目標は 【例】(本体価格10,000円 オプション1と2を選択) <th class="th1">オプション</th> <th class="th1">合計</th> <td>オプション1<br>オプション2</td> <td>17,500円</td> CGIはまだあまり詳しくなく、いろいろ調べて試しながらカスタマイズしているのですが、今回のチェックボックスは全然解決できず時間も無くなってきました。 すみませんが、宜しくお願いします。

  • Perl
  • 回答数1
  • ありがとう数4

みんなの回答

  • ryu_chan
  • ベストアンサー率37% (69/186)
回答No.1

あてずっぽうですが、以下の変更でどうなるでしょうか? my (%option1name,%option1price); @furirua = split(/,/ , option1); $option1name = $option1[0]; $option1price = $option1[1]; my (%furirubname,%furirubprice); @option2 = split(/,/ , option2); $option2name = $option2[0]; $option2price = $option2[1]; ↓   ↓   ↓変更 use CGI; my $q = new CGI; my ($option1name, $option1price) = split /,/, $q->param("option1"); my ($option2name, $option2price) = split /,/, $q->param("option2");

eos1941
質問者

補足

ありがとうございます。 早速試してみましたが、うまくいきませんでした。 それからチェックボックスが一つでも外れていると、その分VALUEのがずれてしまうので、 VALUEが空の時にも対応するものを入れておかなければならないのか? 難しいですね…。 もう少し調べてみて、どうしようも無くなったら ラジオボタンに切り替えようかと思います。 (こっちは問題なくできています。) ほんとは、使い勝手のよさからチェックボックスにしたいのですが…。

関連するQ&A

  • ショッピングカート カスタマイズ

    すいません、966で投稿しているのですが 更に詳しく理解して頂く為に再投稿させて頂きます。 現在、初心者ながら出来上がっている 「ショッピングカート」をカスタマイズしているの ですが困っています。下にあるプルダウン項目の 「詳細」A5 10冊 19000円 選択してカートに 入れた際に「詳細」A5 10冊「価格」19000円と 分けて表示させたいのですが、どうしたら良いか わからず困っておりますどなたかご存じの方、 助けて頂けませんか? 詳細は「syouhinnumber」価格は「kakaku」と 決まっている。現在は詳細、「A5 10冊 19000円」と 表示される。これを「詳細」A5 10冊「価格」19000円 とカートの中で分けて表示されるようにしたい。 現在は <form Action="http://www.*****.jp/cgi-bin/acart/setcook.cgi" METHOD=POST> <INPUT TYPE="hidden"NAME="shouhinmei" VALUE="ヨコ 見積書"> <INPUT TYPE="hidden"NAME="kazu" VALUE="1"> <INPUT TYPE="hidden" NAME="kakaku" VALUE="19000"> <TABLE BORDER=0> <TR><TD ALIGN=right>詳細</TD> <TD><SELECT name="shouhinnumber"> <OPTION>A5 10冊 19000円 <OPTION>A5 20冊 22000円 <OPTION>A5 30冊 25000円 <OPTION>A5 50冊 28000円 <OPTION>A5100冊 31000円 </SELECT> </TD></TR> <TR><TD></TD> <TD valign="middle"> <INPUT NAME="SUBMIT" TYPE="SUBMIT" VALUE="注文する"> </TD></TR> </TABLE> となっています。訂正・追加する箇所を教えて 頂けませんか?お願い致します。

    • 締切済み
    • CGI
  • Smarty? あたくしレベルではカスタマイズできません。HELP!

    現在、自力で、テンプレートサイトをカスタマイズ奮闘いたしております。が、ここ数日、全く前に進むことができません。どなたか、ご教授お願いいたします。 オプションが2個の場合、オプション1個目(例 サイズ)横軸、2個目(例 カラー)縦軸 となり、価格表のテーブルが作成されます。 これを《縦横逆表示に!》したいのです。もちろん、それぞれの対象セルの値も・・・ オプションが1個の場合、オプションが0個の場合は、そのままま表示でOK。 オプションが2個の場合のvalueの[0]と[1]を逆で、縦横のタイトルは逆になるのは理解。表の中も逆にしたいので、item[num][num2]をitem[num2][num]にして、逆表示になるもののセル数があわないし、中身が完璧には表示されない・・・ どこをどうすればよいのか途方にくれてます。 下記のHTML?以外の書き換えが必要なのでしょうか?ココ以外はカスタムができない仕様になってます。 以下、元のHTML <!-- Option(オプション在庫・値段詳細) --> <div id="Option" align="center"> <div class="product_name" style="margin:10px 0px;">「<{$product.name}>」のオプション詳細情報</div> <{***** オプションが1個の場合 *****}> <{if $option_num == 1}> <table class="option_table" border="0" cellpadding="1" cellspacing="1"> <tr> <{***** オプション名を表示 *****}> <{section name=num loop=$option_value[0]}> <th class="option_cell1"><{$option_value[0][num].name}></th> <{/section}> </tr> <tr> <{***** 在庫数・値段などを表示 *****}> <{section name=num loop=$option_item[0]}> <td class="option_cell2"> <{$option_item[0][num].price}><br /> <{if $option_item[0][num].d_flg == true}> <{$option_item[0][num].d_stk}> <{/if}> </td> <{/section}> </tr> </table> <{***** オプションが2個の場合 *****}> <{elseif $option_num == 2}> <table class="option_table" border="0" cellpadding="1" cellspacing="1"> <tr> <th class="option_cell1"></th> <{***** オプション名(一つ目)を表示(横に列挙) *****}> <{section name=num loop=$option_value[0]}> <th class="option_cell1"><{$option_value[0][num].name}></th> <{/section}> </tr> <{section name=num loop=$option_value[1]}> <tr> <{***** オプション名(一つ目)を表示(縦に列挙) *****}> <th class="option_cell1"><{$option_value[1][num].name}></th> <{***** 在庫数・値段などを表示 *****}> <{section name=num2 loop=$option_item[num]}> <td class="option_cell2"> <{$option_item[num][num2].price}><br /> <{if $option_item[num][num2].d_flg == true}> <{$option_item[num][num2].d_stk}> <{/if}> </td> <{/section}> </tr> <{/section}> </table> <{***** オプションがない場合 *****}> <{else}> <div style="margin-bottom:10px;margin-top:10px;">オプション情報がありません。</div> <{/if}> <div class="option_btn" style="margin-bottom:10px;margin-top:10px;"> <a href="javascript:window.close();">閉じる</a> </div> <br /> </div>

  • jacascriptとフォームselectメニューで計算した値を保存したい

    お世話になります。 javascriptを使った計算を勤め先で必要ということで、社内で少しパソコンに詳しいという理由で自分が手がけることになりましたorz 色々と検索しながら勉強し、ようやく思い通りのプログラムを見つけて参考にしながら実践してみたのですが、思い通りにならない箇所が一部ありまして困っています。 参考にしたのは以下のサイトなのですが、 ttp://www.tagindex.com/javascript/form/comp1b.html セレクトメニューから選んだ値を特定の数値で掛けそれを合計するという流れなのですが、このスクリプトだと、一度計算を終えると、もう一度セレクトメニューから値を選択しないと値が0になってしまっているのです。 希望としては、この選択した値を保存しておき、計算が終わってもそれ以前の選択状況のままにしておきたいんですが、どうやればできるでしょうか? <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>

  • 自動計算java scriptについてご質問

    http://www.tagindex.com/javascript/form/comp1b.html に自動計算フォームがあります。ソースは以下です。 やりたいのは、商品サンプル3の行の変更です。 この行だけ、商品名と単価の欄はそのままで、数量欄のプルダウンメニューをなくして空欄にして、金額欄に常に 500 が表示され、合計に加算されるようにしたいのです。(商品サンプル3を送料に変更したいのです。送料は注文数によって変更されず、常に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 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>

  • 自動計算について教えてください

    http://www.tagindex.com/javascript/form/comp1b.html に自動計算フォームがあります。ソースは以下です。 やりたいのは、商品サンプル3の行の変更です。 この行だけ、商品名と単価の欄はそのままで、数量欄のプルダウンメニューをなくして空欄にして、金額欄に常に 500 が表示され、合計に加算されるようにしたいのです。(商品サンプル3を送料に変更したいのです。送料は注文数によって変更されず、常に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 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>

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

    ジャバスクリプトで作った自動計算フォームが 動かなくて困り果ております。 初心者です。御指南のほど、どうぞ宜しくお願いします。 ■ 編集ソース <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中に下記のソースを記述しセレクトボックスの数量が選択されたときに自動計算をしようとしています。 ------------------------------------------------------------------- <table summary="ご購入内容"> <tr> <th><p>カレンダー</p></th> <td class="price">1,000円(税込)</td> <td class="select"> <input type="hidden" name="field16_name" value="カレンダー" /> <input type="hidden" name="field16_req" value="no" /> <select type="select" id="item1" name="field16_text" accesskey="a" tabindex="1" onchange="keisan();"> <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> </select></td> </tr> </table> <table summary="小計金額"> <tr> <th><p>小計金額</p></th> <td><input type="text" id="sender-shoukei1" name="field21_text" value="0" accesskey="k" tabindex="6" /> 円(税込)</td> </tr> <tr> <th><p>送料</p></th> <td> <input type="text" id="sender-postage1" name="field22_text" value="0" accesskey="k" tabindex="7" /> 円(税込)</td> </tr> </table> <table summary="合計金額" class="inner-02 m20"> <tr class="gokei"> <th>合計金額</th> <td> <input type="text" id="sender-goukei" name="field29_text" value="0" accesskey="k" tabindex="14" /> 円(税込)</td> </tr> </table> ------------------------------------------------------------------- <script type="text/javascript"> /* <![CDATA[ */ function keisan(){ /* 商品 */ var price1 = document.form.field16_text.options[document.form.field16_text.selectedIndex].value; var field21_text= parseInt(price1)*1470 ; /* 小計 */ document.form.field21_text.value = addFigure(field21_text); /*送料 */ var price1p = 0; if ( price1 < 2 ) { price1p = price1 * 290; } else { price1p = 0; } var field22_text = parseInt(price1p); if ( field21_text > 5000 ) { field22_text = 0; } document.form.field22_text.value = addFigure(field22_text); /* 合計 */ var field29_text = parseInt(field21_text); document.form.field29_text.value = addFigure(field29_text); function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } } /* ]]> */ </script> ------------------------------------------------------------------- しかし、「'document.form.field16_text'はNullまたはオブジェクトではありません」とエラーが出てしまいます。 アンダーバーは利用できないのでしょうか?どこに問題があるのかお教えください。 どうぞ宜しくお願いいたします。

  • メールの本文に入れる言葉を選んだ物によって変更したい。

    これで本文に文字を入れられるのは分るのですが、 <a href="mailto:sample@oooindex.com?subject=お問い合わせ&body=ご記入ください">メールはこちらへ</a> メールに下で選択した商品名を自動的に入力するようにしたいです。どうすれば良いでしょうか?初心者なので、お手柔らかにお願いします。 (どんなスタイルかはこのアドレスに載っています) http://www.tagindex.com/javascript/form/comp1b.html <HTML> <HEAD> <TITLE>TAG index Webサイト</TITLE> <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 NAME="form1"> <TABLE BORDER="1" CELLSPACING="2" CELLPADDING="2" BGCOLOR="#FFFFFF"> <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>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5 </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>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5 </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>1 <OPTION>2 <OPTION>3 <OPTION>4 <OPTION>5 </SELECT></TD> <TD><INPUT TYPE="text" NAME="field3" SIZE="8" VALUE="0"> 円</TD> </TR> <TR> <TD ALIGN="right" COLSPAN="3"><FONT COLOR="#FF0000"><B>合計</B></FONT></TD> <TD><INPUT TYPE="text" NAME="field_total" SIZE="8" VALUE="0"> 円</TD> </TR> </TABLE> </FORM> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • 自動計算の追加質問

    さきほどいただいた自動計算Scriptありがとうございました。さて英語でのサイトも作っていて、こちらの方は、29.99ドルといった小数点以下の数値を使いたいですが、うまくいきません。いただいたどのスクリプトでも、合計がおかしな数字ででてきてしまうのです。例えば以下のスクリプトで、商品サンプル1を1つ選ぶと合計は36.99であるはずなのに、36.989999999999995と出てしまうのです。 どうしたら良いでしょうか? なにとぞよろしくお願い申し上げます。 <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 * 29.99; document.form1.field1.value = price1; var price2 = document.form1.goods2.selectedIndex * 6; document.form1.field2.value = price2; var price3 = (price1 || price2) ? 7: 0; document.form1.field3.value = price3; var total = price1 + price2 + price3; document.form1.field_total.value = total; } </script> </head> <form action="#" name="form1"> <table> <tr> <th>商品名</th> <th>単価</th> <th>数量</th> <th>金額</th> </tr> <tr> <td>商品サンプル1</td> <td align="right">$29.99</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">6</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">$7</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> さきほど二重ポストをしてしまいましたが、このサイト、以前は質問するとすぐに反映されたのですが、いまはすぐに質問が出てこなかったのです。そんなわけで2回同じ質問を投稿してしまいました・・・。そのせいか一度目の質問は勝手に締め切りにされてしまいました。OneOneさん失礼いたしました。。

  • 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