Repeating items JQUERY

Question

Repeating items JQUERY

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good afternoon guys,

There was a problem, I had a doubt about the sum system with JQUERY, but I would like you to analyze what is wrong with my code because of the error (NaN) with multiple text boxes, what I did is that php generates type a menu only that I can not add the requests independently.

Here's the js riddle: link

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><formaction="#">
<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);

     });
    });

html jquery

asked by anonymous 03.05.2017 / 18:43

2 answers

0

try to turn v1 into number as well:

var v1 = Number($('#item1 span').html());

03.05.2017 / 18:51

Plotting graphs - R Difficulty in adding data in db using PHP and MYSQL

score 0 · Accepted Answer

You should not have as many elements with the same ID, such as #qtdits and # item1. IDs must be unique, so it is necessary to have more elements with a common ID, use classes or attributes.

Then you can go through with each one, as a suggestion, all the items:

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

// #whattoorderrequested changed to: .qtdits;

// # item1 changed to: .item;

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

Just remembering, I'm sure that's not the case, but the final calculation must be done on the server, re-checking the value of the items, otherwise malicious users can change the value on the page. (=