Repetition of JQUERY items

Asked

Viewed 134 times

0

Good afternoon, everyone,

There was a problem, I had a question about summation system with JQUERY, but I would like you to analyze what is wrong in my code because it error (Nan) with multiple text boxes, what I did is what php generates like a menu only I can’t add the orders independently.

Here is the js Riddle: https://jsfiddle.net/6mkzzvqz/11/

HTML

<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 type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
      </div>

  </div>
  <div id="item1" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
  </div>
</div>
<div class="quantity">

      <div class="pizza-add-sub">
        <input type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
      </div>

  </div>
  <div id="item1" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
  </div>
</div>
<div class="quantity">

      <div class="pizza-add-sub">
        <input type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
      </div>

  </div>
  <div id="item1" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
  </div>
</div>
<div class="quantity">

      <div class="pizza-add-sub">
        <input type="text" id="qtdpedidos" class="qtdpedidos" value="0"/>
      </div>

  </div>
  <div id="item1" class="pizza-price"> <span id="pizza" class="pizza">10.00</span>
  </div>
</div>
</form>
<p>Valor do Pedido: R$<span id="resultado" class="resultado">0.00</span></p> 

JQUERY

$(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 v1 = $('#item1 span').text();
        var v2 = Number(document.getElementById("qtdpedidos").value);
        document.getElementById("resultado").innerHTML = parseFloat(v1 * v2).toFixed(2);

     });
    });

2 answers

0

tries to turn v1 into number as well:

var v1 = Number($('#item1 span').html());
  • So friend, I made the changes but he keeps accusing that is not number.

  • Sorry: changes the text to html() wait I will edit

  • see if it works that way.

  • It works, however it only sums with the first element, wanted to add all the elements at once you have some suggestion of how it could be done?

  • yes, it is just you always take the value of all imputs and do the calculation in Event change between inputs: Document.getElementById("id"). value

0


You should not have so many elements with the same ID, as is the case of: #qtdpedidos and #item1. Ids must be unique, when it is necessary to have more elements with a common identification, use classes or attributes.

Then you can browse with a each, as a suggestion, all the items:

var valorTotal = 0;
$.each($(".quantity"), function(){
      valorTotal += Number($(this).find(".qtdpedidos").val()) * Number($(this).find(".item span").html())
});

//#details changed to: . qtdpedidos;

//#item1 changed to: . item;

Then you can apply the Total value with the format you want for the final result. #result

Just remembering, I’m sure it’s not the case, but the final calculation should be done on the server, reverting the value of the items, otherwise, malicious users may change the value on the page. (=

Browser other questions tagged

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