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
– user3518614, Commented Apr 10, 2014 at 8:54
You have to bind to the onChange event of your quantity element — TheGr8_Nik
– TheGr8_Nik, Commented Apr 10, 2014 at 8:56
You don't need javascript: in onXXX attributes. You only need it when you're putting JS in href. — Barmar
– Barmar, Commented Apr 10, 2014 at 8:58

Mario Gonzales Flores · Accepted Answer · 2014-04-10 14:43:18Z

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>

Community · Accepted Answer · 2017-05-23 11:56:53Z

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, 2017 at 11:56

CommunityBot

11 silver badge

answered Apr 10, 2014 at 14:08

user1733583

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related