CODEWITHSUNDEEP
javascriptjqueryhtml
Sajjad Tabreez
Sajjad Tabreez

Reputation: 188

Multiplication of fields value

Consider the following code, I want to calculate the multiplication of price and quantity fields.

Everytime I click the update button, it shows NAN.

For the quantity field, I have used plus and minus buttons to increase/decrease the quantity.

I'm actually not getting how to debug this particular issue.

$('.btn-number').click(function(e) {
  e.preventDefault();

  fieldName = $(this).attr('data-field');
  type = $(this).attr('data-type');
  var input = $("input[name='" + fieldName + "']");
  var currentVal = parseInt(input.val());
  if (!isNaN(currentVal)) {
    if (type == 'minus') {

      if (currentVal > input.attr('min')) {
        input.val(currentVal - 1).change();
      }
      if (parseInt(input.val()) == input.attr('min')) {
        $(this).attr('disabled', true);
      }

    } else if (type == 'plus') {

      if (currentVal < input.attr('max')) {
        input.val(currentVal + 1).change();
      }
      if (parseInt(input.val()) == input.attr('max')) {
        $(this).attr('disabled', true);
      }

    }
  } else {
    input.val(0);
  }
});
$('.input-number').focusin(function() {
  $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {

  minValue = parseInt($(this).attr('min'));
  maxValue = parseInt($(this).attr('max'));
  valueCurrent = parseInt($(this).val());

  name = $(this).attr('name');
  if (valueCurrent >= minValue) {
    $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
  } else {

    $(this).val($(this).data('oldValue'));
  }
  if (valueCurrent <= maxValue) {
    $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
  } else {

    $(this).val($(this).data('oldValue'));
  }


});
$(".input-number").keydown(function(e) {
  // Allow: backspace, delete, tab, escape, enter and .
  if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && e.ctrlKey === true) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39)) {
    // let it happen, don't do anything
    return;
  }
  // Ensure that it is a number and stop the keypress
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
  }
});


function calculate() {
  var num1 = document.getElementById('PPRICE').value;
  var num2 = document.getElementById('QTY').value;
  var update = num1 * num2;
  document.getElementById("TOTAL").innerHTML = update;


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" class="shop_table cart">
  <thead>
    <tr>
      <th class="product-id">Product Id</th>
      <th class="product-name">Product</th>
      <th class="product-price">Price</th>
      <th class="product-quantity">Quantity</th>
      <th class="product-subtotal">Total</th>
      <th class="product-remove">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="cart_item">
      <td class="product-id" valign="center">
        <a title="Remove this item" class="remove" href="#">P521</a>
      </td>
      <td class="product-name" valign="middle">
        <a href="single-product.html">Ship Your Idea</a>
      </td>

      <td class="product-price" valign="middle">
        <span id="PPRICE" class="amount" value="15">$15.00</span>
      </td>

      <td class="product-quantity">
        <div class="quantity buttons_added">
          <input type="button" class="minus btn-number" value="-" data-type="minus" data-field="num">
          <input type="number" id="QTY" name="num" value="0" min="0" max="5" class="input-text qty text input-number" title="Qty">
          <input type="button" class="plus btn-number" value="+" data-type="plus" data-field="num"> &nbsp;ea.
        </div>

      </td>



      <td class="product-subtotal" valign="middle">
        <span id="TOTAL" class="amount">$15.00</span>
      </td>
      <td class="product-remove">
        <a title="Remove this item" class="remove" href="#">
          <span class="glyphicon glyphicon-trash"></span>
        </a>
      </td>
    </tr>
    <tr>
      <td class="actions" colspan="7">
        <div class="coupon" style="display: none;">
          <label for="coupon_code">Coupon:</label>
          <input type="text" placeholder="Coupon code" value="" id="coupon_code" class="input-text" name="coupon_code">
          <input type="submit" value="Apply Coupon" name="apply_coupon" class="button">
        </div>
        <input type="button" id="update" value="Update Cart" name="update_cart" class="button" onClick="calculate()">

      </td>
    </tr>
  </tbody>
</table>

Upvotes: 3

Views: 1223

Answers (4)

connexo
connexo

Reputation: 56770

span does not have a value attribute. More importantly, as a Javascript DOM object, span does not have a value property (which you could add via Javascript, but that would make things only more difficult).

Instead, use a data-value attribute. data--attributes have been introduced as universal attributes available on any HTML element.

You can name your data attributes freely as long as their name starts with data-. In your example you could also name it data-price and access it with PPRICE.dataset.price. Please note that if you use a name with several dashes in it (like data-product-price) the dashes get converted to camelcase automatically on the dataset of the element (PPRICE.dataset.productPrice).

$('.btn-number').click(function(e) {
  e.preventDefault();

  fieldName = $(this).attr('data-field');
  type = $(this).attr('data-type');
  var input = $("input[name='" + fieldName + "']");
  var currentVal = parseInt(input.val());
  if (!isNaN(currentVal)) {
    if (type == 'minus') {

      if (currentVal > input.attr('min')) {
        input.val(currentVal - 1).change();
      }
      if (parseInt(input.val()) == input.attr('min')) {
        $(this).attr('disabled', true);
      }

    } else if (type == 'plus') {

      if (currentVal < input.attr('max')) {
        input.val(currentVal + 1).change();
      }
      if (parseInt(input.val()) == input.attr('max')) {
        $(this).attr('disabled', true);
      }

    }
  } else {
    input.val(0);
  }
});
$('.input-number').focusin(function() {
  $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {

  minValue = parseInt($(this).attr('min'));
  maxValue = parseInt($(this).attr('max'));
  valueCurrent = parseInt($(this).val());

  name = $(this).attr('name');
  if (valueCurrent >= minValue) {
    $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
  } else {

    $(this).val($(this).data('oldValue'));
  }
  if (valueCurrent <= maxValue) {
    $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
  } else {

    $(this).val($(this).data('oldValue'));
  }


});
$(".input-number").keydown(function(e) {
  // Allow: backspace, delete, tab, escape, enter and .
  if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && e.ctrlKey === true) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39)) {
    // let it happen, don't do anything
    return;
  }
  // Ensure that it is a number and stop the keypress
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
  }
});


function calculate() {
  var num1 = document.getElementById('PPRICE').dataset.value;
  var num2 = document.getElementById('QTY').value;
  var update = num1 * num2;
  document.getElementById("TOTAL").innerHTML = `$ ${update.toFixed(2)}`;


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" class="shop_table cart">
  <thead>
    <tr>
      <th class="product-id">Product Id</th>
      <th class="product-name">Product</th>
      <th class="product-price">Price</th>
      <th class="product-quantity">Quantity</th>
      <th class="product-subtotal">Total</th>
      <th class="product-remove">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="cart_item">
      <td class="product-id" valign="center">
        <a title="Remove this item" class="remove" href="#">P521</a>
      </td>
      <td class="product-name" valign="middle">
        <a href="single-product.html">Ship Your Idea</a>
      </td>

      <td class="product-price" valign="middle">
        <span id="PPRICE" class="amount" data-value="15">$15.00</span>
      </td>

      <td class="product-quantity">
        <div class="quantity buttons_added">
          <input type="button" class="minus btn-number" value="-" data-type="minus" data-field="num">
          <input type="number" id="QTY" name="num" value="0" min="0" max="5" class="input-text qty text input-number" title="Qty">
          <input type="button" class="plus btn-number" value="+" data-type="plus" data-field="num"> &nbsp;ea.
        </div>

      </td>



      <td class="product-subtotal" valign="middle">
        <span id="TOTAL" class="amount">$15.00</span>
      </td>
      <td class="product-remove">
        <a title="Remove this item" class="remove" href="#">
          <span class="glyphicon glyphicon-trash"></span>
        </a>
      </td>
    </tr>
    <tr>
      <td class="actions" colspan="7">
        <div class="coupon" style="display: none;">
          <label for="coupon_code">Coupon:</label>
          <input type="text" placeholder="Coupon code" value="" id="coupon_code" class="input-text" name="coupon_code">
          <input type="submit" value="Apply Coupon" name="apply_coupon" class="button">
        </div>
        <input type="button" id="update" value="Update Cart" name="update_cart" class="button" onClick="calculate()">

      </td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

There are few issues with your code:

  • You need to get the value of value attribute of the <span> element so using Javascript you need to do that using attributes.value.value where the value in the middle property is the name of attribute, in your case value
  • And since you are multiplying it. It converts the values into numeric values by implicit type conversion.

$('.btn-number').click(function(e) {
  e.preventDefault();

  fieldName = $(this).attr('data-field');
  type = $(this).attr('data-type');
  var input = $("input[name='" + fieldName + "']");
  var currentVal = parseInt(input.val());
  if (!isNaN(currentVal)) {
    if (type == 'minus') {

      if (currentVal > input.attr('min')) {
        input.val(currentVal - 1).change();
      }
      if (parseInt(input.val()) == input.attr('min')) {
        $(this).attr('disabled', true);
      }

    } else if (type == 'plus') {

      if (currentVal < input.attr('max')) {
        input.val(currentVal + 1).change();
      }
      if (parseInt(input.val()) == input.attr('max')) {
        $(this).attr('disabled', true);
      }

    }
  } else {
    input.val(0);
  }
});
$('.input-number').focusin(function() {
  $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {

  minValue = parseInt($(this).attr('min'));
  maxValue = parseInt($(this).attr('max'));
  valueCurrent = parseInt($(this).val());

  name = $(this).attr('name');
  if (valueCurrent >= minValue) {
    $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
  } else {

    $(this).val($(this).data('oldValue'));
  }
  if (valueCurrent <= maxValue) {
    $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
  } else {

    $(this).val($(this).data('oldValue'));
  }


});
$(".input-number").keydown(function(e) {
  // Allow: backspace, delete, tab, escape, enter and .
  if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && e.ctrlKey === true) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39)) {
    // let it happen, don't do anything
    return;
  }
  // Ensure that it is a number and stop the keypress
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
  }
});


function calculate() {
  var num1 = document.getElementById('PPRICE').attributes.value.value;
  var num2 = document.getElementById('QTY').value;
  var update = num1  * num2;
  document.getElementById("TOTAL").innerHTML = update;


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" class="shop_table cart">
  <thead>
    <tr>
      <th class="product-id">Product Id</th>
      <th class="product-name">Product</th>
      <th class="product-price">Price</th>
      <th class="product-quantity">Quantity</th>
      <th class="product-subtotal">Total</th>
      <th class="product-remove">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="cart_item">
      <td class="product-id" valign="center">
        <a title="Remove this item" class="remove" href="#">P521</a>
      </td>
      <td class="product-name" valign="middle">
        <a href="single-product.html">Ship Your Idea</a>
      </td>

      <td class="product-price" valign="middle">
        <span id="PPRICE" class="amount" value="15">$15.00</span>
      </td>

      <td class="product-quantity">
        <div class="quantity buttons_added">
          <input type="button" class="minus btn-number" value="-" data-type="minus" data-field="num">
          <input type="number" id="QTY" name="num" value="0" min="0" max="5" class="input-text qty text input-number" title="Qty">
          <input type="button" class="plus btn-number" value="+" data-type="plus" data-field="num"> &nbsp;ea.
        </div>

      </td>



      <td class="product-subtotal" valign="middle">
        <span id="TOTAL" class="amount">$15.00</span>
      </td>
      <td class="product-remove">
        <a title="Remove this item" class="remove" href="#">
          <span class="glyphicon glyphicon-trash"></span>
        </a>
      </td>
    </tr>
    <tr>
      <td class="actions" colspan="7">
        <div class="coupon" style="display: none;">
          <label for="coupon_code">Coupon:</label>
          <input type="text" placeholder="Coupon code" value="" id="coupon_code" class="input-text" name="coupon_code">
          <input type="submit" value="Apply Coupon" name="apply_coupon" class="button">
        </div>
        <input type="button" id="update" value="Update Cart" name="update_cart" class="button" onClick="calculate()">

      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Roy Scheffers
Roy Scheffers

Reputation: 3908

Here's how you can fix the problem.

You read values from an input differently than from a span. 

var num1 = document.getElementById('PPRICE').innerHTML;  // span
var num2 = document.getElementById('QTY').value;         // input

Also, as you have the $ in the span, this is not a number which is the reason why you get the NaN error message. In my code clean the input first using this num1 = parseInt(num1.replace('$', '')); It removes the $ sign and casts the var into an integer using the parseInt() function.

Then you can properly multiply the result. In the end, I add the $ back again using the following.

document.getElementById("TOTAL").innerHTML = '$' + update;


$('.btn-number').click(function(e) {
  e.preventDefault();

  fieldName = $(this).attr('data-field');
  type = $(this).attr('data-type');
  var input = $("input[name='" + fieldName + "']");
  var currentVal = parseInt(input.val());
  if (!isNaN(currentVal)) {
    if (type == 'minus') {

      if (currentVal > input.attr('min')) {
        input.val(currentVal - 1).change();
      }
      if (parseInt(input.val()) == input.attr('min')) {
        $(this).attr('disabled', true);
      }

    } else if (type == 'plus') {

      if (currentVal < input.attr('max')) {
        input.val(currentVal + 1).change();
      }
      if (parseInt(input.val()) == input.attr('max')) {
        $(this).attr('disabled', true);
      }

    }
  } else {
    input.val(0);
  }
});
$('.input-number').focusin(function() {
  $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {

  minValue = parseInt($(this).attr('min'));
  maxValue = parseInt($(this).attr('max'));
  valueCurrent = parseInt($(this).val());

  name = $(this).attr('name');
  if (valueCurrent >= minValue) {
    $(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
  } else {

    $(this).val($(this).data('oldValue'));
  }
  if (valueCurrent <= maxValue) {
    $(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
  } else {

    $(this).val($(this).data('oldValue'));
  }


});
$(".input-number").keydown(function(e) {
  // Allow: backspace, delete, tab, escape, enter and .
  if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
    // Allow: Ctrl+A
    (e.keyCode == 65 && e.ctrlKey === true) ||
    // Allow: home, end, left, right
    (e.keyCode >= 35 && e.keyCode <= 39)) {
    // let it happen, don't do anything
    return;
  }
  // Ensure that it is a number and stop the keypress
  if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
    e.preventDefault();
  }
});


function calculate() {
  var num1 = document.getElementById('PPRICE').innerHTML;
  var num2 = document.getElementById('QTY').value;
  num1 = parseInt(num1.replace('$', ''));
  var update = num1 * num2;
  document.getElementById("TOTAL").innerHTML = '$' + update;


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" class="shop_table cart">
  <thead>
    <tr>
      <th class="product-id">Product Id</th>
      <th class="product-name">Product</th>
      <th class="product-price">Price</th>
      <th class="product-quantity">Quantity</th>
      <th class="product-subtotal">Total</th>
      <th class="product-remove">&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    <tr class="cart_item">
      <td class="product-id" valign="center">
        <a title="Remove this item" class="remove" href="#">P521</a>
      </td>
      <td class="product-name" valign="middle">
        <a href="single-product.html">Ship Your Idea</a>
      </td>

      <td class="product-price" valign="middle">
        <span id="PPRICE" class="amount" value="15">$15.00</span>
      </td>

      <td class="product-quantity">
        <div class="quantity buttons_added">
          <input type="button" class="minus btn-number" value="-" data-type="minus" data-field="num">
          <input type="number" id="QTY" name="num" value="0" min="0" max="5" class="input-text qty text input-number" title="Qty">
          <input type="button" class="plus btn-number" value="+" data-type="plus" data-field="num"> &nbsp;ea.
        </div>

      </td>



      <td class="product-subtotal" valign="middle">
        <span id="TOTAL" class="amount">$15.00</span>
      </td>
      <td class="product-remove">
        <a title="Remove this item" class="remove" href="#">
          <span class="glyphicon glyphicon-trash"></span>
        </a>
      </td>
    </tr>
    <tr>
      <td class="actions" colspan="7">
        <div class="coupon" style="display: none;">
          <label for="coupon_code">Coupon:</label>
          <input type="text" placeholder="Coupon code" value="" id="coupon_code" class="input-text" name="coupon_code">
          <input type="submit" value="Apply Coupon" name="apply_coupon" class="button">
        </div>
        <input type="button" id="update" value="Update Cart" name="update_cart" class="button" onClick="calculate()">

      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Nick
Nick

Reputation: 147146

As @connexo points out, span doesn't nominally have a value attribute, however you can still get that value by using getAttribute:

var num1 = document.getElementById('PPRICE').getAttribute('value');

Upvotes: 1

Related Questions