CODEWITHSUNDEEP
javascripthtmlforms
Matthew Campana
Matthew Campana

Reputation: 5

Trying to calculate the total price of items taking into account the quantity selected Javascript

this is my first time posting on this site. i have a webpage that outlines one of my products that I intent to sell

here is my dilemma. I have this code that asks the user to press + and - buttons for the quantity of the item that they want. Now what i am trying to work out is if the user presses + or - any number of times I need to be able to to take into account the number of clicks and calculate the total price for the order on a separate line. Im very new to javascript all help is appreciated thanks

 <form>
   <br> Item Price: $463.50
   <br> Please Select Quantity
   <input type='button' name='subtract' onclick='javascript:   document.getElementById("qty").value--;' value='-'/>
   <input type='button' name='add' onclick='javascript: document.getElementById("qty").value++;' value='+'/>
   <input type='text' name='qty' id='qty' />
   </form>

Upvotes: 0

Views: 4921

Answers (3)

Eric Turner
Eric Turner

Reputation: 1824

I would separate out the Javascript code into its own <script> element, and do something like:

<form>
   <br/> Item Price: $<span id="price">463.50</span>
   <br/> Please Select Quantity
   <input type="button" name="subtract" id="subtract" value="-"></input>
   <input type="button" name="add" id="add" value="+"></input>
   <input type="text" name="qty" id="qty" value="0"></input>
   <br/> Total 
   <input type="text" name="total" id="total" value="0"></input>
</form>

The Javascript would look like:

$(function() {

   var price = parseFloat($('#price').text());

   $('#subtract').on("click",function() {
       var $qty = $('#qty');
       var current = parseInt($qty.val());
       if ( current > 0 ) {
           $qty.val(current-1);
           $('#total').val(price*(current-1));
       } else {
           $('#total').val(0);
       }
   });

   $('#add').on("click",function() {
       var $qty = $('#qty');
       var current = parseInt($qty.val());
       $qty.val(current+1);
       $('#total').val(price*(current+1));
   });

});

You can see it in action.

This is all do-able without jQuery, but it makes life a lot easier!

Since you mentioned you're new to this, a word of WARNING: In the real app only use the quantity from the page, and re-calculate out how much to charge them on the back end. It would be very easy for someone to modify either the price or total in the DOM; if you were to use the price or total from the DOM then a malicious user could buy it for any price they wanted! Always assume input is malicious or incorrect.

Upvotes: 1

Voonic
Voonic

Reputation: 4785

<form>
<br> Item Price: $<span id='price'>463.50</span>


    var unitprice = (document.getElementById('price').innerText || document.getElementById('price').textContent);
    var price = parseFloat(unitprice);
    var count = parseInt(document.getElementById("qty").value, 10)
    var total = price * count;
    alert(total); // or do whatever you want

Upvotes: 1

Swaroop Nagendra
Swaroop Nagendra

Reputation: 605

var value = parseInt(document.getElementById("qty").value, 10)

item_price = item_price * value;

document.getElementById("someid").innertHTML = item_price;

Upvotes: 0

Related Questions