web tasarımı checkbox toplama

berkayBNC

merhabalar bir web projem var elimde 6 adet farklı satıs paketlerı var ve bu paketlerın sabıt bır fıyatı var fakat kullanıcıya checkbox larla ekstralar sectırmek ıstıyorum ama sectıgı her ekstranın farklı ucretlerı var ve kullanıcının her sectıgı ekstra ıcın secılenlerın fıyatlarının toplamını altta gostermek ıstıyorum bunu nasıl yapabılırım

backbone

Merhaba,

bazi detaylari verirseniz birileri yardimci olabilir.

Bu web projenizi hangi programlama diliyle gelistiriyorsunuz ?
Kullandiginiz bir Script dili var mi projenizde ?

Saygilarimla

berkayBNC

backbone
html css ve js internette bu sorunla ılgılı jquery ıle yapılmıs bır ornek buldum fakat bu seferde paketlerde olan cakısmalardan dolayı paketın bulundugu yerdekı sonuca degılde baska pakete eklıyo ekstraları

JavaScript

Bazen kitap okumadigima yanıyorum 🙂
Bende mi sorun onu da bilmiyorum , sorunun sonuna gelince başını unuttum.
Biraz kitap okuyup tekrar bakayım soruya.
Sırf kitap okumadığım için zamanında bogazicine giremedim.
Şaka bir yana soru çok basit arka uç ( server ) hangi dilde olursa olsun işin içine JavaScript girecek ( yani ben ) 🙂

backbone

Merhaba,

eger yanlis anlamadiysam checkbox'lar araciligi ile düzenlemeye calistiginiz kendi paketlerinizde cakisma oluyor. Her pakete bir ID degeri vermeyi deneyin yada varsa ID degerini kullanarak sonucu atayin.

Saygilarimla

berkayBNC

backbone
bu yöntemi de denedim hepsine farklı id verdim fakat çakışma sorunu yine çözülmedi acaba jquery ile ilgili mi bi sorun yaşıyorum bilmiyorum yapmak istediğim şeyi anladıysanız farklı bir yöntem öneriniz varsa deneyebilirim

backbone

berkayBNC

paylastiginiz ikinci resimin 10683 ve 10686 satirlari arasindaki kodlari denediniz ve onlar mi cakisma yapiyor ?

Lütfen yardimci olabilecegimiz sekilde bilgi verebilir misiniz ? Mesela örnek iki paket ve denediginiz kodlar gibi, veya sayfa kodlariniz (özel degilse).

Saygilarimla

KerimCETINBAS

Merhaba;

Bütün datanız html de hard coded şekilde öncelikle bunu bi javascript objesine çevirerek başlayabilirsiniz. Bu şekilde yaparsanız hayat sizin için daha kolay olur.

daha sonra verinizle dinamik olarak html yaparsın. Checkboxlar her değiştiğinde de yada bir düğmeye basıldığında fiyatı hesaplatabilirsiniz.


(() =>{
const contents = [
     {  name: "Lazer show", price: "1250"  },
     {  name: "Fix yemek menu", price: "750" }
   ....
]

contents.forEach((item, index) => {
     $("#degerler tbody").append( `
             <li>
                 <td>${index}</td>
                 <td>${item.name}</td>
                  <td>${item.price} </td>
                 <td><input type="checkbox" value="${index}" /></td>
           </li>` )
    })
})()

   $("#deger tbody li checkbox")
        .each(function () {
              $(this).change( () => CalculateSubTotal())
         })

function CalculateSubTotal() {
   let subtotal = 0;
        $("#deger tbody li checkbox")
           .each(function () {
             
              subtotal =+ contents[$(this).val()]
           })
      console.log(subtotal)
   }
}

backbone

Merhaba,

@KerimCETINBAS cok güzel ve profesyonel bir cözüm önermis. Pure JavaScript icin yinede alternatif önereyim. Burada ilgili td'lerinize id veriyorsunuz ve gerekli id'yi isleme alip siparis toplamina yazdiriyorsunuz. Kodlarda gerekli bilgiler mevcut.

Not : @berkayBNC sizden ricam lütfen birdahaki sefere yardim isterken bizlere kolaylik saglayin. Yoksa inanin örnek kod yazmak o kadar zor oluyor ki. Kaldi ki sizin isteginiz üzerine yardim ediyoruz. En azindan kodlarinizi resim seklinde degil de bizim kopayalayacagimiz sekilde örnek verin.


<script type="text/javascript">

function sum(price, isSum) {
    var total = document.getElementById("siptoplam");

    if (total.value == "") {
        total.value = price
    }
    else {
        total.value = isSum ? (parseInt(price) + parseInt(total.value)) : (parseInt(total.value) - parseInt(price));
    }

}

function setTotal(clickedBox) {

    if (clickedBox.id.localeCompare('lazer') == 0) {
        const lazerPrice = document.getElementById("lazerPrice").innerHTML;
        sum(lazerPrice, clickedBox.checked);
    }

    if (clickedBox.id.localeCompare('yemek') == 0) {
        const yemekPrice = document.getElementById("yemekPrice").innerHTML;
        sum(yemekPrice, clickedBox.checked);
    }

    if (clickedBox.id.localeCompare('dj') == 0) {
        const djPrice = document.getElementById("djPrice").innerHTML;
        sum(djPrice, clickedBox.checked);
    }

    if (clickedBox.id.localeCompare('pasta') == 0) {
        const pastaPrice = document.getElementById("pastaPrice").innerHTML;
        sum(pastaPrice, clickedBox.checked);
    }
}

</script>
<section class="col-md-4" aria-labelledby="hostingTitle">
    <h2 id="test1">CheckBox Sample</h2>

<table>
    <tr>
        <td><b>SIRA</b></td>
        <td><b>HIZMET</b></td>
        <td><b>FIYAT</b></td>
        <td><b>SEC</b></td>
    </tr>

    <tbody>
        <tr>
            <td>1</td>
            <td>Canli lazer show</td>
            <td id="lazerPrice">1250 TL</td>
            <td><input id="lazer" type="checkbox" style="accent-color:#f1683a" onclick="setTotal(this);" /></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Fix yemek</td>
            <td id="yemekPrice">750 TL</td>
            <td><input id="yemek" type="checkbox" style="accent-color:#f1683a" onclick="setTotal(this);" /></td>
        </tr>

        <tr>
            <td>3</td>
            <td>DJ Saatlik</td>
            <td id="djPrice">1500 TL</td>
            <td><input id="dj" type="checkbox" style="accent-color:#f1683a" onclick="setTotal(this);" /></td>
        </tr>

        <tr>
            <td>4</td>
            <td>6-8 Kisilik pasta</td>
            <td id="pastaPrice">1000 TL</td>
            <td><input id="pasta" type="checkbox" style="accent-color:#f1683a" onclick="setTotal(this);" /></td>
        </tr>
    </tbody>
</table>
<hr class="gradient">
<div id="extraToplam" style="display:none;">

</div>
<div>
    <input id="siptoplam" name="siptoplam" type="text" value=""/>
</div>
</section>

Saygilarimla

JavaScript

Yapabildinizmi yoksa basitçe anlatayım mı ?