Jquery - Get data-price of selected and calculate total price

chibanemourad
September 1, 2023
251 views
0 votes
2 Answers

I am working on ecommerce website,
I have issue when i try to calculate the total price using the function total().
I made several attempts but it failed.
I need help, thanks.

Answers

Chosen as BEST ANSWER

 function initQuantity() {
        document.querySelector(".minus").classList.add('disable');
        let t_price;
        let valueCount;
            let price = document.getElementById("price").innerText;
            function total() {
                let sub_total = (valueCount * price) + t_price;
                let total = parseInt(sub_total);
                document.getElementById("price").innerText = sub_total;
                document.getElementById("qnt").innerText = valueCount;
                document.getElementById("total").innerText = total;
            }
            $('#wil').on('change', function() {
                t_price = $(this).find('option:selected').data('price');
               $('#tarif').html(t_price + ' $ ');
           });
        document.querySelector(".plus").addEventListener("click", function () {
            valueCount = document.getElementById("quantity_value").value;
            valueCount++;
            document.getElementById("quantity_value").value = valueCount;
            if (valueCount > 1) {
                document.querySelector(".minus").classList.remove("disable");
            }
            if (valueCount == 10) {
                document.querySelector(".plus").classList.add('disable');
            }
            total();
        });
        document.querySelector(".minus").addEventListener("click", function () {
            valueCount = document.getElementById("quantity_value").value;
            valueCount--;
            document.getElementById("quantity_value").value = valueCount;

            if (valueCount == 1) {
                document.querySelector(".minus").classList.add('disable');
            }
            if (valueCount < 10) {
                document.querySelector(".plus").classList.remove("disable");
            }
            total();

        });
 }

<div class="quantity_selector">
<span class="plus">
<i class="fa fa-plus" aria-hidden="true" for="quantity_value"></i></span>
<input type="number" name="qnt" id="quantity_value" value="1" min="1">
<span class="minus"><i class="fa fa-minus" aria-hidden="true" for="quantity_value"></i></span>
</div>

<select class="form_input input_name input_ph" name="wilaya" id="wil" required>
 <option value="" data-price="0" selected disabled>...</option>
 <option value="1" data-price="200">1</option>
 <option value="1" data-price="300">2</option>
 <option value="1" data-price="400">3</option>
 </select>
<br>
 <span id="price">4000</span> </br>
 <span id="tarif">select</span></br>
 <span id="total">4000</span>

(Edit)

I’m not entirely sure what you’re trying to achieve, but here’s something that works.

const updateForm = () => {
  const wil = document.getElementById("wil");
  const value = wil.options[wil.selectedIndex].value;
  
  const currentTotal = document.querySelector(".currentTotal")
  currentTotal.innerText = value;
  currentTotal.value = value;

    const total = document.querySelector(".total")
  total.innerText = value;
  total.value = value;
};

const plus = () => {
  const total = parseInt(document.querySelector(".total").value) + 1;
  if (total > 1) {
    document.querySelector(".minus").classList.remove("disable");
  }
  if (total === 10) {
    document.querySelector(".plus").classList.add('disable');
  }
   document.querySelector(".currentTotal").innerText = total;
};

const minus = () => {
  const total = parseInt(document.querySelector(".total").value);
  if (total - 1 === 1) {
    document.querySelector(".minus").classList.add('disable');
  }
  if (total - 1 < 10) {
    document.querySelector(".plus").classList.remove("disable");
  }
    document.querySelector(".currentTotal").innerText = total - 1;
};

window.addEventListener("load", () => {
  document.getElementById("wil").addEventListener("change", updateForm);
  document.getElementById("plus").addEventListener("click", plus);
  document.getElementById("minus").addEventListener("click", minus);
  updateForm();
});

HTML

<div id="quantity_selector">
  <button id="minus" class="minus fa fa-minus">-</button>
  <span class="currentTotal" value="0">0</span>
  <button id="plus" class="plus fa fa-plus" aria-hidden="true">+</button>  
</div>

<select class="form_input input_name input_ph" id="wil" required>
 <option value="0">...</option>
 <option value="200">1</option>
 <option value="300">2</option>
 <option value="400">3</option>
</select>
<br>
Total: $<span class="total" value="0">0</span>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Get data-price of selected and calculate total price

Answers