javascript - Total table column with jquery function -

-

i have found on site jquery function updating table row. need total column. anybody? i,m not familiar jquery , tried lot of things don't working.

fiddle: http://jsfiddle.net/heliosh/r7dvay4o/

js

$(document).ready(function () {     function updatearticle1() {         var persons = parsefloat($("#dare_price1").val());         var total = (persons) * 2.00;         var total = total.tofixed(2);         $("#total_price_amount1").val(total);     }     $(document).on("change, keyup", "#dare_price1", updatearticle1); });  $(document).ready(function () {     function updatearticle2() {         var animals = parsefloat($("#dare_price2").val());         var total = (animals) * 3.50;         var total = total.tofixed(2);         $("#total_price_amount2").val(total);     }     $(document).on("change, keyup", "#dare_price2", updatearticle2); });  $(document).ready(function () {     function updatearticle3() {         var bedlinen = parsefloat($("#dare_price3").val());         var total = (bedlinen) * 8.50;         var total = total.tofixed(2);         $("#total_price_amount3").val(total);     }     $(document).on("change, keyup", "#dare_price3", updatearticle3); });  $(document).ready(function () {     function updatearticle4() {         var towels = parsefloat($("#dare_price4").val());         var total = (towels) * 7.50;         var total = total.tofixed(2);         $("#total_price_amount4").val(total);     }     $(document).on("change, keyup", "#dare_price4", updatearticle4); });

html

<table>     <tr>         <td>persons?</td>         <td>             <input class="span4 input-big" id="dare_price1" name="persons" value="" size="30" type="text" />         </td>     </tr>     <tr>         <td>animals?</td>         <td>             <input class="span4 input-big" id="dare_price2" name="animals" value="" size="30" type="text" />         </td>     </tr>     <tr>         <td>bedlinen?</td>         <td>             <input class="span4 input-big" id="dare_price3" name="bedlinen" value="" size="30" type="text" />         </td>     </tr>     <tr>         <td>towels?</td>         <td>             <input class="span4 input-big" id="dare_price4" name="towels" value="" size="30" type="text" />         </td>     </tr> </table> <table style="width: 50%">     <tr>         <td style="width: 403px"></td>         <td></td>     </tr>     <tr>         <td style="width: 403px">rentalprice</td>         <td>189.00</td>         <td>euro</td>     </tr>     <tr>         <td style="width: 403px">taxes</td>         <td style="width: 50px">             <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount1" readonly="readonly" name="pricepersons" value="" />         </td>         <td>euro</td>     </tr>     <tr>         <td style="width: 403px"><span lang="nl">animals</span>         </td>         <td>             <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount2" readonly="readonly" name="priceanimals" value="" />         </td>         <td>euro</td>     </tr>     <tr>         <td style="width: 403px"><span lang="nl">bedlinen</span>         </td>         <td>             <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount3" readonly="readonly" name="pricebedlinen" value="" />         </td>         <td>euro</td>     </tr>     <tr>         <td style="width: 403px"><span lang="nl">towels</span>         </td>         <td>             <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount4" readonly="readonly" name="pricetowels" value="" />         </td>         <td>euro</td>     </tr>     <tr>         <td style="width: 403px">total</td>         <td>&nbsp;</td>         <td>euro</td>     </tr> </table>

here updated fiddle.

i calculates grand total of items.

here snippet.

$(document).ready(function() {    function updatearticle1() {      var persons = parsefloat($("#dare_price1").val());      var total = (persons) * 2.00;      var total = total.tofixed(2);      if (isnan(total)) total = 0;      $("#total_price_amount1").val(total);    }        function updatearticle2() {      var animals = parsefloat($("#dare_price2").val());      var total = (animals) * 3.50;      var total = total.tofixed(2);      if (isnan(total)) total = 0;      $("#total_price_amount2").val(total);    }        function updatearticle3() {      var bedlinen = parsefloat($("#dare_price3").val());      var total = (bedlinen) * 8.50;      var total = total.tofixed(2);      if (isnan(total)) total = 0;      $("#total_price_amount3").val(total);    }        function updatearticle4() {      var towels = parsefloat($("#dare_price4").val());      var total = (towels) * 7.50;      var total = total.tofixed(2);      if (isnan(total)) total = 0;      $("#total_price_amount4").val(total);    }        function updatetotal() {      var price1 = parsefloat($("#total_price_amount1").val());      var price2 = parsefloat($("#total_price_amount2").val());      var price3 = parsefloat($("#total_price_amount3").val());      var price4 = parsefloat($("#total_price_amount4").val());      var total = price1 + price2 + price3 + price4;      if (isnan(total)) total = 0;      $("#totalsum").text(total);    }      $(document).on("change, keyup", "#dare_price1", updatearticle1);    $(document).on("change, keyup", "#dare_price2", updatearticle2);    $(document).on("change, keyup", "#dare_price3", updatearticle3);    $(document).on("change, keyup", "#dare_price4", updatearticle4);    $(document).on("click", "#gettotal", updatetotal);  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  <table>    <tr>      <td>persons?</td>      <td>        <input class="span4 input-big" id="dare_price1" name="persons" value="" size="30" type="text" />      </td>    </tr>    <tr>      <td>animals?</td>      <td>        <input class="span4 input-big" id="dare_price2" name="animals" value="" size="30" type="text" />      </td>    </tr>    <tr>      <td>bedlinen?</td>      <td>        <input class="span4 input-big" id="dare_price3" name="bedlinen" value="" size="30" type="text" />      </td>    </tr>    <tr>      <td>towels?</td>      <td>        <input class="span4 input-big" id="dare_price4" name="towels" value="" size="30" type="text" />      </td>    </tr>  </table>  <table style="width: 50%">    <tr>      <td style="width: 403px"></td>      <td></td>    </tr>    <tr>      <td style="width: 403px">rentalprice</td>      <td>189.00</td>      <td>euro</td>    </tr>    <tr>      <td style="width: 403px">taxes</td>      <td style="width: 50px">        <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount1" readonly="readonly" name="pricepersons" value="" />      </td>      <td>euro</td>    </tr>    <tr>      <td style="width: 403px"><span lang="nl">animals</span>      </td>      <td>        <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount2" readonly="readonly" name="priceanimals" value="" />      </td>      <td>euro</td>    </tr>    <tr>      <td style="width: 403px"><span lang="nl">bedlinen</span>      </td>      <td>        <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount3" readonly="readonly" name="pricebedlinen" value="" />      </td>      <td>euro</td>    </tr>    <tr>      <td style="width: 403px"><span lang="nl">towels</span>      </td>      <td>        <input style="border: 0px;" class="style11 span4 input-big" id="total_price_amount4" readonly="readonly" name="pricetowels" value="" />      </td>      <td>euro</td>    </tr>    <tr>      <td style="width: 403px">total</td>      <td id="totalsum">&nbsp;</td>      <td>euro</td>    </tr>  </table>  <input id="gettotal" type="button" value="get total" />

this code can further optimized replacing 4 functions replacearticle1(), replacearticle2(), replacearticle3(), replacearticle4() single function replacearticle() , updating respective elements using ids.


Comments

Post a Comment

Popular posts from this blog

c# - Better 64-bit byte array hash -

-
i need hash algorithm produces 64-bit hash code ( long ) fewer collisions string.gethashcode() , fast (no expensive calls cryptographic functions). here's implementation of fnv still shows 3% of collisions after testing 2 million random strings. need number way lower. void main() { const string chars = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!#@$%^&*()_+}{\":?><,./;'[]0123456789\\"; const int n = 2000000; var random = new random(); var hashes = new hashset<long>(); int collisions = 0; for(int = 0; < n; i++) { var len = random.next(chars.length); var str = new char[len]; (int j = 0; j < len; j++) { str[j] = chars[random.next(chars.length)]; } var s = new string(str); if(!hashes.add(get64bithash( s ))) collisions++; } console.writeline("collision percentage after " + n + " random strings: " + ((doubl
Read more

webrtc - Which ICE candidate am I using and why? -

-
[questions in bold below] i have setup kurento media server 5.1.3 in datacenter behind firewall running os ubuntu 14.04. has 2 network cards: 222.222.222.222 (eth0 - private ip) 111.111.111.111 (eth1 - public ip) attached below sdp (setremotedescription) when browser connected kurento media server type: answer, sdp: v=0 o=- 5487318114793304426 0 in ip4 0.0.0.0 s=kurento media server c=in ip4 0.0.0.0 t=0 0 a=group:bundle audio video m=audio 59068 rtp/savpf 111 0 c=in ip4 111.111.111.111 a=rtpmap:111 opus/48000/2 a=rtpmap:0 pcmu/8000 a=sendrecv a=rtcp:59068 in ip4 111.111.111.111 a=rtcp-mux a=ssrc:669011897 cname:user39019747@host-6e83e4c2 a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time a=mid:audio b=as:20 a=ice-ufrag:ymdk a=ice-pwd:lylifk5ueqzpwm91ddj37e a=fingerprint:sha-256 ff:0f:81:8c:41:4e:b4:b6:c6:d8:36:f3:d6:5f:09:fd:5f:af:13:b3:9d:fc:12:66:ac:f3:56:d6:5b:0a:73:5d a=candidate:1 1 udp 2013266431 111.111.111.111 55239 typ host a=candidate:2 1 udp
Read more

php - Zend Framework / Skeleton-Application / Composer install issue -

-
i trying create zend framework application using skeleton in netbeans. when run composer install, following error message: "c:\php\php.exe" "c:\composer\composer.phar" "--ansi" "--no-interaction" "update" "--dev" using deprecated option "dev". dev packages installed default now. loading composer repositories package information updating dependencies (including require-dev) requirements not resolved installable set of packages. problem 1 - package requires php >=5.5 php version (5.4.42) not satisfy requirement. problem 2 - installation request zendframework/zendframework 2.5.1 -> satisfiable zendframework/zendframework[2.5.1]. - zendframework/zendframework 2.5.1 requires php >=5.5 -> php version (5.4.42) not satisfy requirement. done. apparently, zend framework only needs php 5.3+ contradicts above. need use php 5.4. my composer.json following: { "name": "
Read more