Button that updates 2 sets of values using Javascript/HTML?

Question

I'm making a simple shopping cart, I have made a quantity checker with - and + buttons to change the amount desired, and also made it so it accepts only numbers in the text field. I however need to make the quantity desired match the total price displayed. and need it to update without refreshing. (eg. 1 item = $3,000,000, 2 items = $6,000,000)

Heres the javascript:

          <script type="text/javascript">
function subtractQty(){
if(document.getElementById("qty").value - 1 < 1)
return;
else
document.getElementById("qty").value--;
}

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}



 </script>

and heres the HTML:

<form name="f1" action="" method="post">
<input type='text' name='qty' id='qty' value='1' onkeypress="return isNumber(event)" />
<input type='button' name='subtract' onclick='javascript: subtractQty();' value='-'/>
<input type='button' name='add' onclick='javascript: document.getElementById("qty").value++;' value='+'/>
<input type='submit' name='buy' value="buy">
<input type='hidden' name='product code' value="3">

</form>

http://jsfiddle.net/BRF6g/4/ - there is all the code in JSfiddle, I'm trying to get the base value of 3000000 to change every time the quantity is changed, since thats the price of the item. (note: the - button works on chrome browser, but not on this editor, for some reason)

hehe, yeh im making an imaginary 'flying carpet' sales page. 3,000,000 is pretty reasonable for a flying carpet i say :P — user3518614, Apr 10 '14 at 08:54
You have to bind to the `onChange` event of your quantity element — TheGr8_Nik, Apr 10 '14 at 08:56
You don't need `javascript:` in `onXXX` attributes. You only need it when you're putting JS in `href`. — Barmar, Apr 10 '14 at 08:58
everything works fine in my code, im just wondering how to bind, so im able to update both qty, and total price with a click of a button — user3518614, Apr 10 '14 at 09:00
Add the code that updates the total price to the Javascript that updates the quantity. — Barmar, Apr 10 '14 at 09:01
thanks for that, I however, have no clue how do a "showTotal()/updateTotal()" type function. using base value of 3,000,000 — user3518614, Apr 10 '14 at 09:06
jsfiddle link has been added to the bottom of the post. still need help — user3518614, Apr 10 '14 at 14:07

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

You can use an OnClick function.

This answers solves your problem of updating a value without page refresh.

Hope this helps.

Please do leave a feedback.

edited May 23 '17 at 11:56

Community

1
1

answered Apr 10 '14 at 14:08

score 0 · Accepted Answer · answered Apr 10 '14 at 14:43

This work:

<form name="f1" action="" method="post">
<input type='text' name='qty' id='qty' value='1' onkeyup="updatePrice()" />
<input type='button' name='subtract' onclick='javascript: subtractQty();updatePrice();' value='-'/>
<input type='button' name='add' onclick='javascript:document.getElementById("qty").value++;updatePrice();' value='+'/>
<input type='submit' name='buy' value="buy">
<input type='hidden' name='product code' value="3">
<span>The Cost($): <span id="total">3000000</span></span>
</form>

<script>
function subtractQty(){
if(document.getElementById("qty").value - 1 < 1)
return;
else
document.getElementById("qty").value--;
}
function updatePrice()
{
    var price = 3000000;
    var inputqty = document.getElementById("qty");
    qty = inputqty.value;
    newqty = parseInt(qty) *  parseInt(price);  
    document.getElementById("total").innerHTML = parseInt(newqty);
}
</script>

Button that updates 2 sets of values using Javascript/HTML?

2 Answers2