CODEWITHSUNDEEP
jquery
Cody Carmichael
Cody Carmichael

Reputation: 187

Replace previous value of input jQuery

I have a script where I'm trying to pull the value of the current input. The input is increased or decreased onClick of a button. Then I need to use this value as the amount of the item you are purchasing. However, when I increase or decrease the amount, it simply changes the value like so - 4 3 2 1 Cookies 3 4 3 2 1 Cookies 5 4 3 4 3 2 1 Cookies ..and so on.

Is there a way I can simply replace the quantity value without it just prepending to it?

My current code - 

var newQty = 1;
var payFor = 'Cookies';
var PayAmount = 10.00;
$(".increment-quantity,.decrement-quantity").on("click", function(ev) {
  var currentQty = $('input[name="quantity"]').val();
  var qtyDirection = $(this).data("direction");



  if (qtyDirection == "1") {
    newQty = parseInt(currentQty) + 1;

  } else if (qtyDirection == "-1") {
    newQty = parseInt(currentQty) - 1;

  }

  // make decrement disabled at 1
  if (newQty == 1) {
    $(".decrement-quantity").attr("disabled", "disabled");
  }

  // remove disabled attribute on subtract
  if (newQty > 1) {
    $(".decrement-quantity").removeAttr("disabled");
  }

  if (newQty > 0) {
    newQty = newQty.toString();
    $('input[name="quantity"]').val(newQty);
  } else {
    $('input[name="quantity"]').val("1");
  }

  //User Amount Selection


  var payFor = $('#paymentBtn').data('pay_for');
  $('#paymentBtn').data('pay_for', newQty + ' ' + payFor);


  //for testing
  var newPayFor = $('#paymentBtn').data('pay_for');
  console.log(newPayFor);

  var finalPayAmount = (PayAmount * newQty);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="paymentBtn" data-pay_for="Cookies">
</div>
<div class="quanSelCont">
  <div class="prodQuan">
    <p>Quantity</p>
    <input data-min="1" data-max="0" type="text" name="quantity" value="1" readonly="true">
    <div class="quantity-selectors-container">
      <div class="quantity-selectors">
        <button type="button" class="increment-quantity" aria-label="Add one" data-direction="1"><span>&#43;</span></button>
        <button type="button" class="decrement-quantity" aria-label="Subtract one" data-direction="-1" disabled="disabled"><span>&#8722;</span></button>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 273

Answers (2)

symlink
symlink

Reputation: 12209

You're retrieving the value from data-pay_for, concatenating an integer, and setting it back, so every time it's adding to the string. You can simplify your code like this:

$(".increment-quantity,.decrement-quantity").on("click", function() {

  let currentQty = $('input[name="quantity"]').val();

  newQty = $(this).data("direction") == "1" ? parseInt(currentQty) + 1 : parseInt(currentQty) - 1;

  if (newQty == 1) {
    $(".decrement-quantity").attr("disabled", "disabled");
  } else if (newQty > 1) {
    $(".decrement-quantity").removeAttr("disabled");
  }

  $('input[name="quantity"]').val(newQty > 0 ? newQty : 1);

  console.log(newQty + ' ' + $('#paymentBtn').data('pay_for'));



});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="paymentBtn" data-pay_for="Cookies"></div>
<p>Quantity</p>
<input data-min="1" data-max="0" type="text" name="quantity" value="1" readonly="true">
<button type="button" class="increment-quantity" data-direction="1">&#43;</button>
<button type="button" class="decrement-quantity" data-direction="-1" disabled="disabled">&#8722;</button>

Upvotes: 1

Manish
Manish

Reputation: 5066

The problem with your code are the below lines.

 var payFor = $('#paymentBtn').data('pay_for');
 $('#paymentBtn').data('pay_for', newQty + ' ' + payFor);

As you see the payFor is a string for ex 1 Cookie now when you append the new quantity to that it appends instead of incrementing the value. Below is a simple solution i would suggest store quantity and payFor as separate data properties and use that to display. Below is a working sample of the same.

 $('#paymentBtn').data('pay_for_quantity',  newQty); 


var newQty = 1;
var payFor = 'Cookies';
var PayAmount = 10.00;
$(".increment-quantity,.decrement-quantity").on("click", function(ev) {
  var currentQty = $('input[name="quantity"]').val();
  var qtyDirection = $(this).data("direction");



  if (qtyDirection == "1") {
    newQty = parseInt(currentQty) + 1;

  } else if (qtyDirection == "-1") {
    newQty = parseInt(currentQty) - 1;

  }

  // make decrement disabled at 1
  if (newQty == 1) {
    $(".decrement-quantity").attr("disabled", "disabled");
  }

  // remove disabled attribute on subtract
  if (newQty > 1) {
    $(".decrement-quantity").removeAttr("disabled");
  }

  if (newQty > 0) {
    newQty = newQty.toString();
    $('input[name="quantity"]').val(newQty);
  } else {
    $('input[name="quantity"]').val("1");
  }

  //User Amount Selection


  var payFor = $('#paymentBtn').data('pay_for');
  $('#paymentBtn').data('pay_for', payFor);
  $('#paymentBtn').data('pay_for_quantity', newQty);


  //for testing
  var newPayFor = $('#paymentBtn').data('pay_for_quantity') + ' ' + $('#paymentBtn').data('pay_for');
  console.log(newPayFor);

  var finalPayAmount = (PayAmount * newQty);

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="paymentBtn" data-pay_for="Cookies">
</div>
<div class="quanSelCont">
  <div class="prodQuan">
    <p>Quantity</p>
    <input data-min="1" data-max="0" type="text" name="quantity" value="1" readonly="true">
    <div class="quantity-selectors-container">
      <div class="quantity-selectors">
        <button type="button" class="increment-quantity" aria-label="Add one" data-direction="1"><span>&#43;</span></button>
        <button type="button" class="decrement-quantity" aria-label="Subtract one" data-direction="-1" disabled="disabled"><span>&#8722;</span></button>
      </div>
    </div>
  </div>
</div>

This is just one probable solution. There can be more.

Hope this helps :)

Upvotes: 2

Related Questions