v2.5.2
Giriş yap

Div içindeki div i silmek

nrtszr
363 defa görüntülendi

burayı okumadan soru sorma!

Sepet sistemi yapıyorum. bir tane sepet uygulamam var bunu js ile açıyorum.

Ürün adetini değiştirdigimde eklenen div in güncellemesini ve toplam tutarın değişmesini istiyorum.
Bir türlü yapamadım yardımcı olabilirmisiniz?

<form action="bilgialma.php" method="post">
    <div class="alert alert-primary mt-3" role="alert" id="odemeekrani">
        <div class="row">
            <div class="col border-bottom font-monospace"><small class="text-secondary" title="Ürün"><i class="fas fa-bed"></i> Oda</small></div>
            <div class="col border-bottom font-monospace"><small class="text-secondary" title="Sayı"><i class="fas fa-sort-numeric-up"></i> Sayı</small></div>
            <div class="col border-bottom font-monospace"><small class="text-secondary" title="Fiyat"><i class="fas fa-money-bill"></i> Fiyat</small></div>
        </div>
        <div id="sepet">

        </div>

        <div class="row text-danger" style="font-weight: bold;" id="toplama" name="toplama">
            <div class="col border-top">Toplam</div>
            <div class="col border-top" id="toplam_adet"></div>
            <div class="col border-top" id="toplam_tutar"></div>
        </div>

        <div class="d-grid gap-2 mt-2">
            <button class="btn btn-danger" type="submit">Devam Et</button>
        </div>
    </div>
</form>

Sepete eklediğim listbox:

                                <select class="form-control form-control-sm urun" onchange="odemegoster()" name="urun<?php echo $i; ?>" id="urun<?php echo $i; ?>" data-urunadi="Oda Adı <?php echo $i; ?> - <i class='small'>İadeli</i>">
                                    <option value="0">Seçiniz..</option>
                                    <option data-fiyat="50" value="1">1</option>
                                    <option data-fiyat="100" value="2">2</option>
                                    <option data-fiyat="150" value="3">3</option>
                                    <option data-fiyat="200" value="4">4</option>
                                    <option data-fiyat="250" value="5">5</option>
                                    <option data-fiyat="300" value="6">6</option>
                                    <option data-fiyat="350" value="7">7</option>
                                    <option data-fiyat="400" value="8">8</option>
                                </select>

Kontrol Ettiğim js dosyası

    document.querySelectorAll("select.urun").forEach(urun => {
        // Eğer Select Değişirse (onChange)
        urun.addEventListener("change", function(e) {
            // data-urunadi nın değerini aldık
            var urunadi = this.dataset.urunadi;
            var urunid = this.name;

            //şimdi seçilmiş olan option un fiyatını ve değerini alıcaz
            var secilmisOption = this.options[this.selectedIndex];

/*            console.log("Ürün => " + urunadi);
            console.log("Fiyat => " + secilmisOption.dataset.fiyat);
            console.log("Kaç Tane Alındı => " + secilmisOption.value);
            console.log("urunid => " + urunid);*/

if(secilmisOption.value>0)
{
    var urunkontrol = document.getElementById('sepet_' + urunid + '');
    if(urunkontrol)
    {
        console.log("var");
        console.log(urunid);
        $( 'sepet_' + urunid + '' ).html('<div class="row font-monospace" name=sepet_'+urunid+' id=sepet_'+urunid+'><div class="col">'+urunadi+'</div><div class="col">'+secilmisOption.value+'</div><div class="col">'+secilmisOption.dataset.fiyat+'</div></div>');
    }
    else
    {
        console.log("yok");
        console.log(urunid);
        $( "#sepet" ).append('<div class="row font-monospace" name=sepet_'+urunid+' id=sepet_'+urunid+'><div class="col">'+urunadi+'</div><div class="col">'+secilmisOption.value+'</div><div class="col">'+secilmisOption.dataset.fiyat+'</div></div>');
    }

    var toplam_adet = $("#toplam_adet").html();
    if (!$.isNumeric(toplam_adet)) {
        //it's numeric
        toplam_adet = 0;
    }
        toplam_adet = parseInt(toplam_adet) + parseInt(secilmisOption.value);
    $( "#toplam_adet" ).html(toplam_adet);

    var toplam_tutar = $("#toplam_tutar").html();
    if (!$.isNumeric(toplam_tutar)) {
        //it's numeric
        toplam_tutar = 0;
    }
    toplam_tutar = parseInt(toplam_tutar) + parseInt(secilmisOption.dataset.fiyat);
    $( "#toplam_tutar" ).html(toplam_tutar);
}
else
{
    console.log("veri silinecek");
        var verisil = document.getElementById('sepet_' + urunid + '');
        //verisil.remove();
    $( "div" ).remove( verisil);
    $( "div" ).remove( "#toplam_adet" );
    $( "div" ).remove( "#toplam_tutar" );
}
            //işlemler Buraya
        })
    })

Daha fazla markdown örneğine buraya tıklayarak ulaşabilirsin!

Cevap yaz
Cevaplar (0)
Henüz kimse cevap yazmadı. İlk cevap yazan sen ol!