0
Kayıt Ol

Eş zamanlı veri güncelleme

2

●

72

  • 16-01-2024, 21:31:16
    #1
    meteyilmaz
    meteyilmaz
    Merhabalar,

    İnput değerlerine göre veriyi eş zamanlı güncellemek istiyorum ama kod çalışmıyor. Nerede hata yapıyorum söylermisiniz? Birde her seçimde ekleme yapmayacak, her seçenekte bulunan data-price ile sabit değerleri toplayıp yazdırması lazım.

    <label for="laptopSelect">Laptop:</label> 
       <select class="productSelect" name="laptopSelect" data-price="1500">           
 <option value="0">Seçiniz</option>         
   <option value="1" data-price="1500">1 Adet</option>          
  <option value="2" data-price="1600">2 Adet</option>         
   <option value="3" data-price="1700">3 Adet</option>      
  </select>    
    <label for="phoneSelect">Telefon:</label>     
   <select class="productSelect" name="phoneSelect" data-price="800">    
        <option value="0">Seçiniz</option>         
   <option value="1" data-price="800">1 Adet</option>  
          <option value="2" data-price="850">2 Adet</option>     
       <option value="3" data-price="900">3 Adet</option>     
   </select>

<input type="text" id="totalPrice" name="totalPrice" readonly>

 
<script>
        function initializePrices() {
            // Sayfa yüklendiğinde toplam fiyatı güncelle
            updateTotalPrice();
        }

        function updateTotalPrice() {
            var totalPrice = 0;

            // Her bir seçeneği dolaş
            $('.productSelect').each(function() {
                var selectedValue = $(this).val();
                var price = parseFloat($(this).find(':selected').data('price')) || 0;

                if (selectedValue !== "0") {
                    totalPrice += price;
                }
            });

            // Toplam fiyatı ekrana yazdır
            $("#totalPrice").val(totalPrice.toFixed(2));
        }

        // Select değişikliklerini dinle
        $('.productSelect').on('change', function() {
            updateTotalPrice();
        });
    </script>
  • 17-01-2024, 00:27:35
    #2
    VEDANTA
    VEDANTA 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <title>Product Selection</title>
  </head>
  <body>
    <form>
      <label for="laptopSelect">Laptop:</label>
      <select class="productSelect" id="laptopSelect" data-price="1500">
        <option value="0">Seçiniz</option>
        <option value="1" data-price="1500">1 Adet</option>
        <option value="2" data-price="1600">2 Adet</option>
        <option value="3" data-price="1700">3 Adet</option>
      </select>
      <label for="phoneSelect">Telefon:</label>
      <select class="productSelect" id="phoneSelect" data-price="800">
        <option value="0">Seçiniz</option>
        <option value="1" data-price="800">1 Adet</option>
        <option value="2" data-price="850">2 Adet</option>
        <option value="3" data-price="900">3 Adet</option>
      </select>
      <input type="text" id="totalPrice" name="totalPrice" readonly />
    </form>
    <script>
      $(document).ready(function () {
        updateTotalPrice();
        $(".productSelect").on("change", function () {
          updateTotalPrice();
        });
      });
      function updateTotalPrice() {
        var totalPrice = 0;
        // Her bir seçeneği dolaş
        $(".productSelect").each(function () {
          var selectedValue = $(this).val();
          var price = parseFloat($(this).find(":selected").data("price")) || 0;
          if (selectedValue !== "0") {
            totalPrice += price;
          }
        });
        // Toplam fiyatı ekrana yazdır
        $("#totalPrice").val(totalPrice.toFixed(2));
      }
    </script>
  </body>
</html>
  • 17-01-2024, 17:45:32
    #3
    meteyilmaz
    meteyilmaz
    VEDANTA adlı üyeden alıntı: mesajı görüntüle 
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <title>Product Selection</title>
  </head>
  <body>
    <form>
      <label for="laptopSelect">Laptop:</label>
      <select class="productSelect" id="laptopSelect" data-price="1500">
        <option value="0">Seçiniz</option>
        <option value="1" data-price="1500">1 Adet</option>
        <option value="2" data-price="1600">2 Adet</option>
        <option value="3" data-price="1700">3 Adet</option>
      </select>
      <label for="phoneSelect">Telefon:</label>
      <select class="productSelect" id="phoneSelect" data-price="800">
        <option value="0">Seçiniz</option>
        <option value="1" data-price="800">1 Adet</option>
        <option value="2" data-price="850">2 Adet</option>
        <option value="3" data-price="900">3 Adet</option>
      </select>
      <input type="text" id="totalPrice" name="totalPrice" readonly />
    </form>
    <script>
      $(document).ready(function () {
        updateTotalPrice();
        $(".productSelect").on("change", function () {
          updateTotalPrice();
        });
      });
      function updateTotalPrice() {
        var totalPrice = 0;
        // Her bir seçeneği dolaş
        $(".productSelect").each(function () {
          var selectedValue = $(this).val();
          var price = parseFloat($(this).find(":selected").data("price")) || 0;
          if (selectedValue !== "0") {
            totalPrice += price;
          }
        });
        // Toplam fiyatı ekrana yazdır
        $("#totalPrice").val(totalPrice.toFixed(2));
      }
    </script>
  </body>
</html>
    Teşekkürler. Çalıştı.