javascript - Sum two values from 2 span elements (the values for each span element can be selected by the user via dropdown) -
i have made 2 forms. user able select value (product) each form price displayed in separate element unique class. when 1 option form selected others hidden. did that. now, can't seem sum values elements . here i've done html:
<div id="netpaketi-wrapper"> <strong><p class="textmain"><b>Изберете го Вашиот хостинг пакет</b> </p></strong> <form class="hosting-biranje" action=""> <select name="hosting"> <option value="licen" class="ls" selected="selected">ЛИЧЕН СЕРВЕР</option> <option value="biznisl" class="bl">БИЗНИС l</option> <option value="xl" class="bxl">БИЗНИС xl</option> <option value="xxl" class="bxxl">БИЗНИС xxl</option> </select> </form> <div id="opis-paket"> <div class="hosting-paket-opis licen-s"> <p class="opisno">windows/linux</p> <p class="opisno">РАМ до 1gb</p> <p class="opisno">Процесор: intel-core-i-7-4770</p> <p class="opisno">bandwith 570 mbits/s</p> <p class="opisno">Безбедност на податоците (ssl)</p> <p class="opisno">Бeсплатен домен</p> <p class="opisno">ftp пристап</p> </div> <div class="hosting-paket-opis server-l"> <p class="opisno">windows/linux</p> <p class="opisno">РАМ до 2gb</p> <p class="opisno">Процесор: intel-core-i-7-4770</p> <p class="opisno">bandwith 570 mbits/s</p> <p class="opisno">Безбедност на податоците (ssl)</p> <p class="opisno">Бeсплатен домен</p> <p class="opisno">ftp пристап</p> </div> <div class="hosting-paket-opis server-xl"> <p class="opisno">windows/linux</p> <p class="opisno">РАМ до 4gb</p> <p class="opisno">Процесор: intel-core-i-7-4770</p> <p class="opisno">bandwith 570 mbits/s</p> <p class="opisno">Безбедност на податоците (ssl)</p> <p class="opisno">Бeсплатен домен</p> <p class="opisno">ftp пристап</p> </div> <div class="hosting-paket-opis server-xxl"> <p class="opisno">windows/linux</p> <p class="opisno">РАМ до 8gb</p> <p class="opisno">Процесор: intel-core-i-7-4770</p> <p class="opisno">bandwith 570 mbits/s</p> <p class="opisno">Безбедност на податоците (ssl)</p> <p class="opisno">Бeсплатен домен</p> <p class="opisno">ftp пристап</p> </div> <p class="opisno">Цена: <span class="cena-hosting">1200</span> денари годишно</p> </div> this html first form. html second form is:
<div id="netpaketi-wrapper"> <strong><p class="textmain"><b>Изберете го Вашиот вебсајт пакет</b> </p></strong> <form class="vebsajt-biranje" action=""> <select name="vebpaket"> <option value="osnoven" class="vpo" selected="selected">ОСНОВЕН</option> <option value="e-mono" class="vpem">Е-МОНО</option> <option value="e-duo" class="vped">Е-ДУО</option> <option value="e-divers" class="vpedi">Е-ДИВЕРС</option> <option value="osnoven-market" class="vpmo">МАРКЕТ ОСНОВЕН</option> <option value="mono-market" class="vpmm">МАРКЕТ МОНО</option> <option value="duo-market" class="vpmd">МАРКЕТ ДУО</option> <option value="diverce-market" class="vpmdi">МАРКЕТ ДИВЕРС</option> </select> </form> <div id="opis-paket"> <div class="vebsajt-paket-opis osnoven-paket"> <p class="opisno">Сајт дизајниран од нас според Вашите потреби</p> </div> <div class="vebsajt-paket-opis e-mono-paket"> <p class="opisno">Сајт дизајниран според Вашите желби и потреби чии страни ќе имаат сличен изглед и функции</p> </div> <div class="vebsajt-paket-opis e-duo-paket"> <p class="opisno">Сајт дизајниран според Вашите желби и потреби чија почетна страна ќе се разликува од останатите страни во поглед на функции изглед</p> </div> <div class="vebsajt-paket-opis e-divers-paket"> <p class="opisno">Сајт дизајниран според Вашите желби и потреби чии страни значително ќе се разликуваат во поглед на функции и изглед</p> </div> <div class="vebsajt-paket-opis market-osnoven-paket"> <p class="opisno">Сајт дизајниран од нас според Вашите потреби. Интегрирано е-плаќање</p> </div> <div class="vebsajt-paket-opis market-mono-paket"> <p class="opisno">Сајт дизајниран според Вашите желби и потреби чии страни ќе имаат сличен изглед и функции. Интегрирано е-плаќање</p> </div> <div class="vebsajt-paket-opis market-duo-paket"> <p class="opisno">Сајт дизајниран според Вашите желби и потреби чија почетна страна ќе се разликува од останатите страни во поглед на функции изглед. Интегрирано е-плаќање</p> </div> <div class="vebsajt-paket-opis market-divers-paket"> <p class="opisno">Сајт дизајниран според Вашите желби и потреби чии страни значително ќе се разликуваат во поглед на функции и изглед. Интегрирано е-плаќање</p> </div> <p class="opisno">Цена: <span class="cena-vebsajt">6000</span> денари</p> </div> the element sum should displayed is:
<a href="#" class="g-btn type_primary"><span class="iznos"></span> денари</a> that's html, , jquery code used hiding/showing selected values:
<script> var jq=$.noconflict(); jq(document).ready(function(){ jq(".ls").click(function(){ jq(".licen-s").show(); jq(".server-l, .server-xl, .server-xxl").hide(); jquery.removedata(".cena-hosting"); jq(".cena-hosting").text("1200"); }); jq(".bl").click(function(){ jq(".server-l").show(); jq(".licen-s, .server-xl, .server-xxl").hide(); jquery.removedata(".cena-hosting"); jq(".cena-hosting").text("2200"); }); jq(".bxl").click(function(){ jq(".server-xl").show(); jq(".server-l, .licen-s, .server-xxl").hide(); jquery.removedata(".cena-hosting"); jq(".cena-hosting").text("2600"); }); jq(".bxxl").click(function(){ jq(".server-xxl").show(); jq(".server-l, .server-xl, .licen-s").hide(); jquery.removedata(".cena-hosting"); jq(".cena-hosting").text("2900"); }); jq(".vpo").click(function(){ jq(".osnoven-paket").show(); jq(".e-mono-paket, .e-duo-paket, .e-divers-paket, .market-osnoven-paket, .market-mono-paket, .market-duo-paket, .market-divers-paket").hide(); jquery.removedata(".cena-vebsajt"); jq(".cena-vebsajt").text("6000"); }); jq(".vpem").click(function(){ jq(".e-mono-paket").show(); jq(".osnoven-paket, .e-duo-paket, .e-divers-paket, .market-osnoven-paket, .market-mono-paket, .market-duo-paket, .market-divers-paket").hide(); jquery.removedata(".cena-vebsajt"); jq(".cena-vebsajt").text("36000"); }); jq(".vped").click(function(){ jq(".e-duo-paket").show(); jq(".e-mono-paket, .osnoven-paket, .e-divers-paket, .market-osnoven-paket, .market-mono-paket, .market-duo-paket, .market-divers-paket").hide(); jquery.removedata(".cena-vebsajt"); jq(".cena-vebsajt").text("56000"); }); jq(".vpedi").click(function(){ jq(".e-divers-paket").show(); jq(".e-mono-paket, .e-duo-paket, .osnoven-paket, .market-osnoven-paket, .market-mono-paket, .market-duo-paket, .market-divers-paket").hide(); jquery.removedata(".cena-vebsajt"); jq(".cena-vebsajt").text("66000"); }); jq(".vpmo").click(function(){ jq(".market-osnoven-paket").show(); jq(".e-mono-paket, .e-duo-paket, .e-divers-paket, .osnoven-paket, .osnoven-paket, .market-mono-paket, .market-duo-paket, .market-divers-paket").hide(); jquery.removedata(".cena-vebsajt"); jq(".cena-vebsajt").text("26000"); }); jq(".vpmm").click(function(){ jq(".market-mono-paket").show(); jq(".e-mono-paket, .e-duo-paket, .e-divers-paket, .market-osnoven-paket, .osnoven-paket, .market-duo-paket, .market-divers-paket").hide(); jquery.removedata(".cena-vebsajt"); jq(".cena-vebsajt").text("56000"); }); jq(".vpmd").click(function(){ jq(".market-duo-paket").show(); jq(".e-mono-paket, .e-duo-paket, .e-divers-paket, .market-osnoven-paket, .market-mono-paket, .osnoven-paket, .market-divers-paket").hide(); jquery.removedata(".cena-vebsajt"); jq(".cena-vebsajt").text("86000"); }); jq(".vpmdi").click(function(){ jq(".market-divers-paket").show(); jq(".e-mono-paket, .e-duo-paket, .e-divers-paket, .market-osnoven-paket, .market-mono-paket, .market-duo-paket, .osnoven-paket").hide(); jquery.removedata(".cena-vebsajt"); jq(".cena-vebsajt").text("160000"); }); }); </script> the first 4 block of codes first form, , last 8 blocks second form. sum i've tried code:
<script> var jq=$.noconflict(); jq(document).ready(function(){ var newprice = number(text(".cena-vebsajt")) + number(text(".cena-hosting")); jq('.iznos').append(newprice); }); </script> but can't result, doesn't show value have tried with:
<script> var jq=$.noconflict(); jq(document).ready(function(){ var newprice = number(.cena-vebsajt) + number(".cena-hosting"); jq('.iznos').append(newprice); }); </script> but, again, no result. here link page: http://netarchitecture.de/mk/netpaketi.asp appreciated
check out jsfiddle:
the trick use parsefloat or parseint depending on numbers have.
var one=parsefloat($('.cena-vebsajt').text()); var two=parsefloat($('.cena-hosting').text()); var res=one+two; $('.result').text(res); be careful when not sure whether text of span non-numeric. use $.isnumeric instance.
Comments
Post a Comment