Calculate the total value of an order with jQuery

Asked

Viewed 610 times

0

I’m new to jQuery and wanted to do a simple sum operation, but as I’m learning the syntax I still have difficulties.

I managed to generate the total value of the orders, however, I cannot generate total value: the rate has the fixed value, so the value of the total is equal to the rate plus the order value. I made simple sum algorithms using variables, but they return me NAN.

$(document).ready(function() {

  $(".pizza-add-sub").append('<div class="plus qty-pizza">+</div><div class="mines qty-pizza">-</div>');
  $(".qty-pizza").on("click", function() {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    if ($button.text() == "+") {
      var newVal = parseFloat(oldValue) + 1;
    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
      } else {
        newVal = 0;
      }
    }
    $button.parent().find("input").val(newVal);

    var valorTotal = 0;
    var valoresMultiplicar = 0;
    $(".qtdpedidos").each(function() {
      valorTotal += parseFloat($(this).data("preco") * $(this).val());
    })

    $(".item span").each(function() {
      valoresMultiplicar += parseFloat($(this).html());
    })
    $("#resultado").text((valorTotal));


  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
  <div class="media-body">
    <div class="menu-tittle"></div>
    <div class="quantity">
      <div class="pizza-add-sub">
        <input data-preco="10.00" type="text" class="qtdpedidos" value="0" />
      </div>
    </div>
    <div class="item" class="pizza-price">
      <span id="pizza" class="pizza">10.00</span>
    </div>
  </div>
  
  <div class="media-body">
    <div class="quantity">
      <div class="pizza-add-sub">
        <input data-preco="10.00" type="text" id="qtdpedidos" class="qtdpedidos" value="0" />
      </div>
    </div>
    <div class="item" class="pizza-price">
      <span id="Span1" class="pizza">10.00</span>
    </div>
  </div>
</form>

<div class="last-liner">
  <p>Valor do Pedido: R$<span id="resultado" class="resultado">0.00</span></p>
  <p>Taxa de Entrega: <span id="txa" class="txa">0.00</span></p>
  <p>Total: <span id="tot" class="tot">00.00</span></p>
</div>

javascript jquery

  • First, why does it have duplicate code? Inside the fomulário there are two equal fields. Should it be like that? And what part of the code isn’t working? I didn’t get Nan values here.

  • Good evening Anderson, I put two identical codes in the form to simulate what php does, it takes the input value and is generated within a loop, but I preferred to copy the 2 to be more intuitive about the code I removed the sum algorithm and only left the request value, as it was going wrong I prefer to be given suggestions of how I do to calculate the total value, hug.

  • Okay, you need to take the value of input, which is the quantity multiplied by the value of data-preco, what is the price, right? What would be the rate you quote in the question?

  • Exact! the delivery fee is the fixed amount, in fact I forgot to collect a value for the fee, in case it is the order value + rate = total, my problem is to make this value generate in total.

  • Is it something like that? https://jsfiddle.net/dd3Lp0m6/

  • Just put $("#tot"). text((valueTotal+5)); in the script

  • I edited the answer, I think the presentation of the totals got better

Show 2 more comments

1 answer

2


Just put $("#tot").text('R$'+(parseFloat(valorTotal+5).toFixed(2))); in the script

$(document).ready(function() {

  $(".pizza-add-sub").append('<div class="plus qty-pizza">+</div><div class="mines qty-pizza">-</div>');
  $(".qty-pizza").on("click", function() {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    if ($button.text() == "+") {
      var newVal = parseFloat(oldValue) + 1;
    } else {
      // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
      } else {
        newVal = 0;
      }
    }
    $button.parent().find("input").val(newVal);

    var valorTotal = 0;
    var valoresMultiplicar = 0;
    $(".qtdpedidos").each(function() {
      valorTotal += parseFloat($(this).data("preco") * $(this).val());
    })

    $(".item span").each(function() {
      valoresMultiplicar += parseFloat($(this).html());
    })
    
    if (valorTotal==0){
    	$("#tot").text("");
    	$("#resultado").text('');
    }else{
    	$("#tot").text('R$'+(parseFloat(valorTotal+5).toFixed(2)));
    	$("#resultado").text('R$'+parseFloat(valorTotal).toFixed(2));
    }
    
    


  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<form action="#">
  <div class="media-body">
    <div class="menu-tittle"></div>
    <div class="quantity">
      <div class="pizza-add-sub">
        <input data-preco="10.00" type="text" class="qtdpedidos" value="0" />
      </div>
    </div>
    <div class="item" class="pizza-price">
      <span id="pizza" class="pizza">10.00</span>
    </div>
  </div>
  
  <div class="media-body">
    <div class="quantity">
      <div class="pizza-add-sub">
        <input data-preco="10.00" type="text" id="qtdpedidos" class="qtdpedidos" value="0" />
      </div>
    </div>
    <div class="item" class="pizza-price">
      <span id="Span1" class="pizza">10.00</span>
    </div>
  </div>
</form>

<div class="last-liner">
	<p>Valor do Pedido: <span id="resultado" class="resultado"></span></p>
	<p>Taxa de Entrega: <span id="txa" class="txa">5.00</span></p>
	<p>Total: <span id="tot" class="tot"></span></p>
</div>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.