CODEWITHSUNDEEP
javascriptjqueryonchange
Anna A.
Anna A.

Reputation: 65

Increment and Decrement price value on Change

i'm trying to do an price counter synchronizing with increment and decrement buttons, but the price is not changing when i click one of the buttons (+/-) this is not working, how can i solve this issue? Thanks!!!

$('#plus').click(function add() {
    var $qtde = $("#quantity");
    var a = $qtde.val();
    
    a++;
    $("#minus").attr("disabled", !a);
    $qtde.val(a);
});
$("#minus").attr("disabled", !$("#quantity").val());

$('#minus').click(function minust() {
    var $qtde = $("#quantity");
    var b = $qtde.val();
    if (b >= 1) {
        b--;
        $qtde.val(b);
    }
    else {
        $("#minus").attr("disabled", true);
    }
});

/* On change */
$(document).ready(function()
{
    function updatePrice()
    {
        var price = parseFloat($("#quantity").val());
        var total = (price + 1) * 1.05;
        var total = total.toFixed(2);
        $("#total-price").val(total);
    }
    $(document).on("change, keyup, focus", "#quantity", updatePrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="minus" />
<input type="text" id="quantity" value="" name="quantity" />
<input type="button" value="+" id="plus" />
<br />
<input id="total-price" readonly="readonly" value=""/>

Upvotes: 1

Views: 3646

Answers (2)

moazzams
moazzams

Reputation: 35

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>
<div class="sp-quantity">
    <div class="container" style=" font-size:14px; ">
         
      <div class="sp-input">
        <input type="text" class="quantity-input" value="1">

        <div class="button" style="cursor: pointer;">
            +
        </div>
        <div class="button" style="cursor: pointer;">
            -
        </div>
      </div>

     
      
      <p>custom filed</p>
      <div class="sp-input">
        <input type="text" class="quantity-input-db" value="1.8" step="1.8">

        <div class="button" style="cursor: pointer;"> 
            +
        </div>
        <div class="button" style="cursor: pointer;">
            -
        </div>

      </div>

     
    </div>
</div>  




<script type="text/javascript">
        // debugger;

$(document).ready(function () {
    $(".button").on("click", function() {
     
      var $db_value = $('.db_value').val();

      var $quantity = $('.quantity_input').val();

      var db_valu_fix = 1.8;

      var $button = $(this),
      $input = $button.closest('.sp-quantity').find("input.quantity-input");
      
      var oldValue_q = $input.val();

      var $db_value = $button.closest('.sp-quantity').find("input.quantity-input-db");

      var oldValue_db = $db_value.val();

        console.log(oldValue_db);
      

        if ($.trim($button.text()) == "+") {

            newVal = parseFloat(oldValue_q) + 1;

            newdbVal = parseFloat(oldValue_db) + 1;

            //newdbVal.toFixed(2);


        } 
        else {
        
            if (oldValue_q > 0) {

              newVal = parseFloat(oldValue_q) - 1;

              newdbVal = parseFloat(oldValue_db) - 1;

              newdbVal = Math.round(newdbVal * 100) / 100;
            
            } else {

              newVal = 1;
            
            }

        }

        $input.val(newVal);
        $db_value.val(newdbVal);
    });


    // $(".ddd").on("click", function(step) {
    //  var a=$(".quantity-input").val();
    //  var attr=$(".quantity-input").attr(step);

    //  var getValue=a/1;
    //      console.log(attr);
    // });

});


</script>
</body>
</html>

Upvotes: 0

Jordan Soltman
Jordan Soltman

Reputation: 3873

If you change your binding to update whenever there is a click on an input, you'll get the behavior that you are expecting.

$('#plus').click(function add() {
  var $qtde = $("#quantity");
  var a = $qtde.val();

  a++;
  $("#minus").attr("disabled", !a);
  $qtde.val(a);
});
$("#minus").attr("disabled", !$("#quantity").val());

$('#minus').click(function minust() {
  var $qtde = $("#quantity");
  var b = $qtde.val();
  if (b >= 1) {
    b--;
    $qtde.val(b);
  } else {
    $("#minus").attr("disabled", true);
  }
});

/* On change */
$(document).ready(function() {
  function updatePrice() {
    var price = parseFloat($("#quantity").val());
    var total = (price + 1) * 1.05;
    var total = total.toFixed(2);
    $("#total-price").val(total);
  }
  // On the click of an input, update the price
  $(document).on("click", "input", updatePrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="minus" />
<input type="text" id="quantity" value="" name="quantity" />
<input type="button" value="+" id="plus" />
<br />
<input id="total-price" readonly="readonly" value="" />

Upvotes: 2

Related Questions