jqueryで小計値の合算ができない？
- jqueryを使用して小計値の合算がうまくできない場合、解決方法を教えてください。
- jqueryで計算した小計の値を合算したいですが、うまくいきません。どのようにすればよいでしょうか？
- 特定のセレクタの値を取得し、合計値を計算するjqueryの実装方法について教えてください。
- ベストアンサー
jqueryで小計値の合算が出来ません・・・
jqueryで計算した小計の値を合算したいのですが・・・ <div id="oa"> <select name="pa" id="value_pa"> <option value="0">選択して下さい</option> <option value="100">梅</option> <option value="200">竹</option> <option value="300">松</option> </select>× <select name="n" id="value_n"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>個=<span id="result_a"></span>円 </div> のように5種類の計算をして<span id="result_x"></span>の間に結果を埋め込んでいます。 この<span id="result_a"></span>から<span id="result_e"></span>の小計値をボタンを押すことにより合算して合計値を出したいのですが、うまくいきません。 jqueryでどのようにしたらいいのでしょうか？ 教えてください。 よろしくお願いいたします。
- eccschool
- お礼率8% (53/644)
- AJAX
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> 小計値をボタンを押すことにより合算して合計値を出したいのですが、うまくいきません。 現状では、どういう計算をしていて上手くいかないのでしょうか？
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
それだけ計算ができているのなら、 小計1 + 小計2 + 小計3 + 小計4 + 小計5 = 合計値(spanタグ) でいいのではないの？ もっとも、わざわざ合計ボタンを押させなくても、各小計を計算するときに 1～5まで入力されていたら自動的に合計も計算してあげるほうがよさ そうに思えるのは私だけかなぁ。
関連するQ&A
- jqueryでselect要素を表示・非表示する方
下記のように、select要素を2つ用意し、果物か魚を撰択すると、それに応じた2番目のselect要素が表示されるようなコードを作りました。 見た目の問題はないのですが、1つ目で魚を撰択し、あじやさんまを撰択しても、最終的にフォームが送信される時には 果物のvalueが参照されてしまいます。 jqueryのhiddenで隠しているだけなので、果物用のselect要素が裏に潜んでいるためにこういった結果になっているかと思うのですが この問題を解決するためにはどうしたらよいのでしょうか。 <form id="test"> <select id="type"> <option value="fruit">果物</option> <option value="fish">魚</option> </select> <select name="sample" id="fruit"> <option value="apple">りんご</option> <option value="orange">おれんじ</option> </select> <select name="sample" id="fish"> <option value="aji">あじ</option> <option value="sanma">さんま</option> </select> <input type="submit" > </form> // はじめは全て隠しておく $('#fruit').hide(); $('#fish').hide(); $('#type').change(function(){ var type = $(this).val(); if (type == 'fruit') { $('#fruit').show(); $('#fish').hide(); } else { $('#fruit').hide(); $('#fish').show(); } }); $('form').submit(function(){ var result = $('form [name=sample]').val(); alert(result); return false; });
- 締切済み
- JavaScript
- 再び、jqueryのloadについて質問させてください。
再び、jqueryのloadについて質問させてください。 http://www.g-land.net/search02/database.cgi?equal2=123x701&tid=list12&did=data2 上記ページの <div id="selectcol"></div> の部分に、loadで $("#selectcol").load("../item-cat01/gift00102921.html #color");とし、 http://www.g-land.net/item-cat01/gift00102921.html のページ内にある <div id="color"><span class="title" title="色について|商品のお色をお選びください。商品お１つの価格になります。">色：<select name="sp13"><option value="Ａ／レッド">Ａ／レッド</option><option value="Ｂ／グレー">Ｂ／グレー</option><option value="Ｃ／ブラック">Ｃ／ブラック</option></select></span></div> を呼び出したいのですが、呼び出し元となるページの文字コードがshift_jisなのでなのか、呼び出す事が出来ません。(ダミーでutf-8で作ったページからは現状の記述で呼び出す事は出来ました。) これは、回避できない事なのでしょうか。 何卒、ご助言くださいませ。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 条件により押せないボタンを作りたい
2つのセレクトボックスがあり、どちらも選択していれば「検索」ボタンを押せるが どちらか1つでも選択していなければ「検索」ボタンを押せない状態にしたいのですが どのようにすれば可能でしょうか？ <script type="text/javascript"> jQuery(function() { jQuery('#change_btn').click(function() { jQuery.post('price.php', { size : jQuery('#size').attr('value'), days : jQuery('#days').attr('value') }, callBack); }); }); function callBack(data) { jQuery('#change_area').html(data); } </script> <form action="" id="form1" method="post"> <select name="size" id="size"> <option value="">---選択してください---</option> <option value="s1">サイズ01</option> <option value="s2">サイズ02</option> <option value="s3">サイズ03</option> </select> <select name="days" id="days"> <option value="">---選択してください---</option> <option value="d6">6日</option> <option value="d8">8日</option> </select> <input type="button" id="change_btn" value="検索" /> </form>
- ベストアンサー
- JavaScript
- 【PHP】メールフォームの連動するセレクトボックス
メールフォームを作っているのですが、 連動するセレクトボックスにおいて、 自動返信メールに内容が思った様に記載されません。 複数のチェックボックがあり、それぞれに連動して、 セレクトボックス1でサイズを選び、セレクトボックス2で数を選ぶようになっています。 ソースは最後に記載しますが、希望する返信メールの形は以下の通りです。 ーーーーーー現在ーーーーーー 【色 / サイズ / 数量】 S 1個 L 2個 S 3個 【料金】 （表示なし） ーーーーーー希望ーーーーーー 【色 / サイズ / 数量】 レッド S 1個 ブルー L 2個 イエロー S 3個 【料金】 S × 4個：600円 ＝1,800円 L × 2個：900円 ＝1,800円 ご教示のほど、お願い致します。 以下、ソースです。 <dt>色</dt> <dd> <label class="color"><input type="checkbox" name="color[]" id="color_01" value="レッド">レッド</label> </dd> <dd> <select class="parent" name="size_01"> <option value="" class="msg" selected>サイズを選択</option> <option value="S">S：600円</option> <option value="L">L：900円</option> </select> </dd> <dd> <select class="children" name="number_01"> <option value="0" class="msg" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br> </dd> <dd> <label class="color"><input type="checkbox" name="color[]" id="color_01" value="ブルー">ブルー</label> </dd> <dd> <select class="parent" name="size_02"> <option value="" class="msg" selected>サイズを選択</option> <option value="S">S：600円</option> <option value="L">L：900円</option> </select> </dd> <dd> <select class="children" name="number_02"> <option value="0" class="msg" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select><br> </dd> ＜以下、他の色が同様に続きます＞ <dt>料金</dt> <dd class="required"> <div id="result"> S：合計<span class="s maisu" name="sum_s_n" value="0">0</span>個 × 600円 ＝ <span class="s kingaku" name="sum_s_p" value="">0</span>円<br> L：合計<span class="a maisu" name="sum_a_n">0</span>個 × 900円 ＝ <span class="all kingaku" name="sum_all">0</span>
- ベストアンサー
- PHP
- jQueryでajax
ajax（jQuery使用）を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>
- ベストアンサー
- AJAX
- javascriptでコメントアウトができません
下記の様に 「/* ・・・・・ */」でコメントアウトしていますが、「/*」 「*/」も文字としてそのまま画面に表示され、非表示にしたいSELECTの枠も表示されてしまいます。 ご助言いただきたく宜しくお願い致します。 <body style="margin:0px; padding:0px;" onload="load()"> /* <body style="margin:0px; padding:0px;" onload="load()"> <FORM NAME=formMain > <SELECT id="categorySelect" NAME="pref" onChange="funcMain(true)"> <OPTION VALUE="" SELECTED>(カテゴリーを選択してください) <OPTION VALUE="0">食事 <OPTION VALUE="1">病院 <OPTION VALUE="2">小売店 <OPTION VALUE="3">洋服 </SELECT> <SELECT id="subcategorySelect" NAME="city"> <OPTION VALUE="" SELECTED>(サブカテゴリーを選択してください) <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> <OPTION VALUE=""> </SELECT> </FORM> */ <div> <input type="text" id="addressInput" size="40"/> <select id="radiusSelect"> <option value="0.5" selected>0.5km</option> <option value="1">1km</option> <option value="20">20km</option> </select> <input type="button" onclick="searchLocations()" value="検索へGO!"/> </div> <div><select id="locationSelect" style="width:25%;visibility:hidden"></select></div> <div id="map" style="width: 100%; height: 80%"></div> </body> </html>
- ベストアンサー
- JavaScript
- 計算結果の表示方法について
お世話になります。 Java Scriptの記述方法で教えてください。 下記のフォームを作りました。 テキストボックスに目標タイムを4時間30分であれば4.5と入力することで必要な時速とキロ当たりのペースを出すようにしています。 2行に渡り、キロ当たりのペースを分と秒で出ていますがが、これを○分○秒と1行に表示させたいのです。 どなたかお知恵をお願いします。 <html> <head> <script type="text/javascript"> function calc(frm) { var result = Math.round(42.195 / (parseFloat(frm.elements["a"].value))*10) / 10; document.getElementById('result_1').getElementsByTagName('span')[0].innerHTML = result; result = Math.floor(parseFloat(frm.elements["a"].value) / 42.195 * 60); document.getElementById('result_2').getElementsByTagName('span')[0].innerHTML = result; result = Math.round(parseFloat(frm.elements["a"].value) / 42.195 * 60*60)%60; document.getElementById('result_3').getElementsByTagName('span')[0].innerHTML = result; result = Math.round(1 / 42.195 * 5 * parseFloat(frm.elements["a"].value) *100) /100; document.getElementById('result_4').getElementsByTagName('span')[0].innerHTML = result; } </script> </head> <body> <form> <input type="text" name="a"> <input type="button" value="計算" onClick="calc(this.form)"><br> 計算結果<br> <div id="result_1">時速 <span></span>km/h</div> <div id="result_2">キロペース <span></span>分</div><div id="result_3"> <span></span>秒</div> <div id="result_4">5km <span></span>時間</div> </form> </body>
- ベストアンサー
- JavaScript
- メールフォームの確認画面の表示
あるページのメールフォームで <label class="label" for="name1">ラウンド希望日<span class="style1">＊</span></label> <span class="control"> 2008年 <select name="ラウンド希望日" size="1" id="select"> <option value="1">1</option> --------------省略---------------- <option value="12">12</option> </select> 月 <select name="ラウンド希望日" id="select" size="1"> <option value="1">1</option> --------------省略---------------- <option value="31">31</option> </select> 日 </span> と作って、2008年(選択)月(選択)日という感じでお客様に選択していただく項目を設けたのですが、選択して、いざ確認画面に行くと (例)7月25日とした場合 <確認画面> ラウンド希望日｜7 25 と出てしまうんです。 これを本当は"7月25日"と表示したいんです。 これでは読みづらいので… ご指導のほうよろしくお願いします。
- 締切済み
- CGI
- セレクト選択時にチェックボックスをオフにしたい
フォームでセレクトを選択すると、連動してチェックボックスをオフにする仕組みを作りたいのですが、分からずjavascriptで解決できないかと思っております。 現在の問題は test1をセレクトし、オプション1のいずれかのチェックボックスにチェックをしたあと、 セレクトを再度し直し、test3を選びオプション3でいずれかのチェックボックスにチェックした場合、 オプション1で選んだチェックボックスの内容も送信されることです。 セレクトで、何かを選択したらチェックボックスがオフされるようになればと思っております。 ちなみに同じページ内にチェックボックスが複数あります。 <html> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(function(){ $(".station").addClass('hide'); $("#hoge").change(function(){ $(".station").addClass('hide'); $('#' + $("#hoge option:selected").attr("class")).removeClass("hide"); });}) </script> <style type="text/css"> <!-- .hide{display:none;} --> </style><body><form> <select name="c_s" id="hoge"> <option value="none" selected="selected" class="">選択して下さい</option> <option value="test1" class="c1_1">test1</option> <option value="test2" class="c1_2">test2</option> <option value="test3" class="c1_3">test3</option> </select> <div id="c1_1" class="station opt"> オプション1<br /> <input type="checkbox" name="option1" id="option" value="ch_option1" />ch_option1<br /> <input type="checkbox" name="option2" id="option" value="ch_option2" />ch_option2<br /> </div> <div id="c1_2" class="station opt"> オプション2<br /> <input type="checkbox" name="option11" id="option" value="ch_option11" />ch_option11<br /> <input type="checkbox" name="option12" id="option" value="ch_option12" />ch_option12<br /> <input type="checkbox" name="option13" id="option" value="ch_option13" />ch_option13<br /> </div> <div id="c1_3" class="station opt"> オプション3<br /> <input type="checkbox" name="option21" id="option" value="ch_option21" />ch_option21<br /> <input type="checkbox" name="option22" id="option" value="ch_option22" />ch_option22<br /> </div> </form></body></html>
- 締切済み
- JavaScript
- jquery-コンボボックス-選択状態
3つのコンボボックスをjqueryを使って連動させております。 連動するコンボボックスを選択しボタンを押下すると 自画面へ遷移します。 その際に先ほどの画面で選択したコンボボックスを選択状態に したくて困っております。 html <select name="area" id="parent"> <option value="1">エリアを選択</option> <option value="2">北海道・東北</option> <option value="3">関東</option> ・・・ </select> <select name="pref" id="child"> <option class="sub_1" value="1">都道府県を選択</option> <option class="sub_2" value="1">都道府県を選択</option> <option class="sub_2" value="2">北海道</option> <option class="sub_2" value="3">青森</option> <option class="sub_2" value="4">岩手</option> <option class="sub_3" value="1">都道府県を選択</option> <option class="sub_3" value="14">東京</option> <option class="sub_3" value="15">神奈川</option> ・・・ </select> <select name="region" id="grandsun"> <option class="sub_1" value="1">地域を選択</option> <option class="sub_2" value="1">地域を選択</option> <option class="sub_2" value="0101">札幌</option> <option class="sub_3" value="1">地域を選択</option> <option class="sub_3" value="0201">青森市</option> <option class="sub_3" value="0202">弘前市</option> <option class="sub_3" value="0203">八戸市</option> ・・・ ・・・ </select> function makeSublist(parent,child,isSubselectOptional,childVal){ $("body").append("<select style='display:none' id='"+parent+child+"'></select>"); $('#'+parent+child).html($("#"+child+" option")); var parentValue = $('#'+parent).attr('value'); $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone()); childVal = (typeof childVal == "undefined")? "" : childVal ; $("#"+child+' option[@value="'+ childVal +'"]').attr('selected','selected'); $('#'+parent).change( function(){ var parentValue = $('#'+parent).attr('value'); $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone()); $('#'+child).trigger("change"); $('#'+child).focus(); } ); } $(function(){ makeSublist('child','grandsun', true, ''); makeSublist('parent','child', false, '1'); });
- 締切済み
- JavaScript
補足
商品1(プルダウン)×個数(プルダウン)=小計1(spanタグ) 商品2(プルダウン)×個数(プルダウン)=小計2(spanタグ) 商品3(プルダウン)×個数(プルダウン)=小計3(spanタグ) 商品4(プルダウン)×個数(プルダウン)=小計4(spanタグ) 商品5(プルダウン)×個数(プルダウン)=小計5(spanタグ) ボタン 合計値(spanタグ) という感じです。 小計1から5はjqueryで算出できています。 ボタンを押して合計値を表示したいです。 よろしくお願いします。