Make calculations between Inputs

Navigation
1

I'm using a plugin that when you click the + button it multiplies the value.

It works perfectly but the calculation is only done within <span id="price" class="amount"></span> and brings Total within <span id="total" class="total_amount"></span>

When I try to put this interaction inside the Input it does not work. 

function calculate(obj){
                var price = parseFloat($(obj).parent().parent().parent().find('.amount').text()) || 0;
                var quantity = parseInt($(obj).parent().find('.qty').val());
                var total = price * quantity;
               
               $(obj).parent().parent().parent().find('.total_amount').text(total);
            }
    
            function changeQuantity(num,obj){
         
                $(obj).parent().find('.qty').val( parseInt($(obj).parent().find('.qty').val())+num);
            }
    
            $().ready(function(){
                //calculate();
                $(".minus").click(function(){
                    changeQuantity(-1,this);
                    calculate(this);
                });
                $(".plus").click(function(){
                    changeQuantity(1,this);
                    calculate(this);
                });
    
               
    			$(".qty").keyup(function(e){
    				if (e.keyCode == 38)   changeQuantity(1,this);
                    if (e.keyCode == 40) changeQuantity(-1,this);
                    calculate(this);
                });
    
    
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table cart">
  <thead>
     <tr>
       <th class="cart-product-thumbnail">&nbsp;</th>
       <th class="cart-product-name">Produto</th>
       <th class="cart-product-quantity">Quantidade</th>
       <th class="cart-product-price">Precço Unitario</th>
       <th class="cart-product-subtotal">Total</th>
     </tr>
   </thead>
   <tbody>
     <tr class="cart_item">
       <td class="cart-product-thumbnail"></td>
       <td class="cart-product-name">
         <a href="#">Pera</a>
       </td>
       <td class="cart-product-quantity">
          <div class="quantity clearfix">
             <input type="button" value="-" class="minus" field="quantity">
              <input type="text" id="quantity" name="quantity" value="1" class="qty" />
               <input type="button" value="+" class="plus" field="quantity">
           </div>
        </td>
        <td class="cart-product-price">
          R$ <span id="price" class="amount">50000</span>
        </td>
        <td class="cart-product-subtotal">
           <span id="total" class="total_amount"></span>
        </td>
        </tr>
           <tr class="cart_item">
              <td class="cart-product-thumbnail"></td>
              <td class="cart-product-name">
                 <a href="#">Uva</a>
              </td>
              <td class="cart-product-quantity">
                 <div class="quantity clearfix">
                     <input type="button" value="-" class="minus" field="quantity">
                     <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                      <input type="button" value="+" class="plus" field="quantity">
                  </div>
               </td>
               <td class="cart-product-price">
                   R$ <span id="price" class="amount">40000</span>
                </td>
      
                <td class="cart-product-subtotal">
                   <span id="total" class="total_amount"></span>
                 </td>
             </tr>
              <tr class="cart_item">
                 <td class="cart-product-thumbnail"></td>
      
                <td class="cart-product-name">
                  <a href="#">Teste 3</a>
                </td>
      
       
      
                      <td class="cart-product-quantity">
                          <div class="quantity clearfix">
                              <input type="button" value="-" class="minus" field="quantity">
                              <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                              <input type="button" value="+" class="plus" field="quantity">
                          </div>
                      </td>
                      <td class="cart-product-price">
                          R$ <span id="price" class="amount">35000</span>
                      </td>
      
                      <td class="cart-product-subtotal">
                          <span id="total" class="total_amount"></span>
                      </td>
      
                      
                  </tr>
                  
      
                               <tr class="cart_item">
      
      
                      <td class="cart-product-thumbnail">
      
                      </td>
      
                      <td class="cart-product-name">
                          <a href="#">Teste 4</a>
                      </td>
      
       
      
                      <td class="cart-product-quantity">
                          <div class="quantity clearfix">
                              <input type="button" value="-" class="minus" field="quantity">
                              <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                              <input type="button" value="+" class="plus" field="quantity">
                          </div>
                      </td>
                      <td class="cart-product-price">
                          R$ <span id="price" class="amount">35600</span>
                      </td>
      
                      <td class="cart-product-subtotal">
                          <span id="total" class="total_amount"></span>
                      </td>
      
                      
                  </tr>
           </tbody>
      </table>
    
asked by anonymous 17.01.2017 / 13:10

2 answers

4

When you read the data inside a <span></span> , you access the text inside the tags using the .text() method. But to read the data that is in <input></input> , you should read its value, using the .val() method.

So, if you override these lines in the calculate method: 

var price = parseFloat($(obj).parent().parent().parent().find('.amount').text()) || 0;
/* ... */
$(obj).parent().parent().parent().find('.total_amount').text(total);

For these: 

var price = parseFloat($(obj).closest('.cart_item').find('.amount').val()) || 0;
/* ... */    
$(obj).closest('.cart_item').find('.total_amount').val(total);

will have the same behavior as spans .

In addition, I've changed your string from parent() to the closest() method, which finds the nearest "parent "with that selector provided.

Fiddle here: link

Lastly, as a hint, you have several id's of repeated elements ( quantity , price , total ). You should only have a single%% of% for each element. But it might just be for testing, since you do not use them.

EDITED

As well suggested by @JuniorNunes, if you want to keep both "systems", you can modify your id method and check if the element is a calculate through the input of is . Something like this: 

function calculate(obj) {

    var obj_price = $(obj).closest('.cart_item').find('.amount');
    var obj_total = $(obj).closest('.cart_item').find('.total_amount');

    var price = parseFloat( (obj_price.is("input") ? obj_price.val() : obj_price.text()) ) || 0;
    var quantity = parseInt($(obj).closest('.cart_item').find('.qty').val());
    var total = price * quantity;

    if (obj_price.is("input")) {
        obj_total.val(total);
    } else {
        obj_total.text(total);
    }
}

Fiddle here: link

    
17.01.2017 / 14:03
-1

I'm not going to focus solely on the quality of your code, I'm going to answer your question directly about the evento of the input.

In the same way that you have a treatment for when you click the "up arrow" and "down arrow" inside the input , just add a input event on the element to achieve what you want. 

function calculate(obj){
                var price = parseFloat($(obj).parent().parent().parent().find('.amount').text()) || 0;
                var quantity = parseInt($(obj).parent().find('.qty').val());
                var total = price * quantity;
               $(obj).parent().parent().parent().find('.total_amount').text(isNaN(total) ? 0 : total); //adicionei somente uma validação aqui de NaN
            }
    
            function changeQuantity(num,obj){
         
                $(obj).parent().find('.qty').val( parseInt($(obj).parent().find('.qty').val())+num);
            }
    
            $().ready(function(){
                //calculate();
                $(".minus").click(function(){
                    changeQuantity(-1,this);
                    calculate(this);
                });
                $(".plus").click(function(){
                    changeQuantity(1,this);
                    calculate(this);
                });
    
               
    			$(".qty").keyup(function(e){
    				if (e.keyCode == 38)   changeQuantity(1,this);
                    if (e.keyCode == 40) changeQuantity(-1,this);
                    calculate(this);
                });
    
               
    			$(".qty").on("input", function(e){
                    calculate(this);
                });
    
    
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table cart">
  <thead>
     <tr>
       <th class="cart-product-thumbnail">&nbsp;</th>
       <th class="cart-product-name">Produto</th>
       <th class="cart-product-quantity">Quantidade</th>
       <th class="cart-product-price">Precço Unitario</th>
       <th class="cart-product-subtotal">Total</th>
     </tr>
   </thead>
   <tbody>
     <tr class="cart_item">
       <td class="cart-product-thumbnail"></td>
       <td class="cart-product-name">
         <a href="#">Pera</a>
       </td>
       <td class="cart-product-quantity">
          <div class="quantity clearfix">
             <input type="button" value="-" class="minus" field="quantity">
              <input type="text" id="quantity" name="quantity" value="1" class="qty" />
               <input type="button" value="+" class="plus" field="quantity">
           </div>
        </td>
        <td class="cart-product-price">
          R$ <span id="price" class="amount">50000</span>
        </td>
        <td class="cart-product-subtotal">
           <span id="total" class="total_amount"></span>
        </td>
        </tr>
           <tr class="cart_item">
              <td class="cart-product-thumbnail"></td>
              <td class="cart-product-name">
                 <a href="#">Uva</a>
              </td>
              <td class="cart-product-quantity">
                 <div class="quantity clearfix">
                     <input type="button" value="-" class="minus" field="quantity">
                     <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                      <input type="button" value="+" class="plus" field="quantity">
                  </div>
               </td>
               <td class="cart-product-price">
                   R$ <span id="price" class="amount">40000</span>
                </td>
      
                <td class="cart-product-subtotal">
                   <span id="total" class="total_amount"></span>
                 </td>
             </tr>
              <tr class="cart_item">
                 <td class="cart-product-thumbnail"></td>
      
                <td class="cart-product-name">
                  <a href="#">Teste 3</a>
                </td>
      
       
      
                      <td class="cart-product-quantity">
                          <div class="quantity clearfix">
                              <input type="button" value="-" class="minus" field="quantity">
                              <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                              <input type="button" value="+" class="plus" field="quantity">
                          </div>
                      </td>
                      <td class="cart-product-price">
                          R$ <span id="price" class="amount">35000</span>
                      </td>
      
                      <td class="cart-product-subtotal">
                          <span id="total" class="total_amount"></span>
                      </td>
      
                      
                  </tr>
                  
      
                               <tr class="cart_item">
      
      
                      <td class="cart-product-thumbnail">
      
                      </td>
      
                      <td class="cart-product-name">
                          <a href="#">Teste 4</a>
                      </td>
      
       
      
                      <td class="cart-product-quantity">
                          <div class="quantity clearfix">
                              <input type="button" value="-" class="minus" field="quantity">
                              <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                              <input type="button" value="+" class="plus" field="quantity">
                          </div>
                      </td>
                      <td class="cart-product-price">
                          R$ <span id="price" class="amount">35600</span>
                      </td>
      
                      <td class="cart-product-subtotal">
                          <span id="total" class="total_amount"></span>
                      </td>
      
                      
                  </tr>
           </tbody>
      </table>
    
17.01.2017 / 14:09
Hiding entire column with CSS at a specific resolution I'm having a problem with Dev C ++ in displaying members of a class