Javascript onchange - change variable based on select value

Question

So I'm trying to change a variable based on a select value and display it live when changed. I've already got it working by setting the variable in a static fashion but I don't understand how to change the variable if the select value is changed or increased.

In this case I'm trying to change a price based on quantity. Say if the quantity is more than X then the price changes to Y. Please keep in mind I am new to javascript so please keep your answers basic.

This is my current code:

HTML

<label>Single User</label>
<select class="input-mini" name="singleuser" id="singleuser" onchange="changed(this, 0, 34.95)">
    <option value="0">0</option>
    <option value="1">1</option>
</select>&nbsp;&nbsp;<font size="4"><b>@ $34.95/mo</b></font>

Javascript

var size = 36;
var cart = new Array();

for (var j = 0; j < size; j++) //initialize cart to all 0
    cart[j] = 0;

function changed(me, id, price) {
    var amount = me.options[me.selectedIndex].value; //quantity passed
    var t_price = amount * price; //multiply operation
    cart[id] = t_price; //update cart array
    update_spans();

    document.getElementById(id).value = amount; //update quantity for final page
}
function update_spans() {
    put("cart0", cart[0]);
}
function put(name, price) {
    try {
        price = (Math.round(price * 100) / 100); //round
        price = price.toFixed(2); //two decimal places
        document.getElementById(name).innerHTML = price; //put into span
    } catch (err) {
        //error
    }
}

This isn't exactly what I'm trying to do. Reading it again I see I explained it poorly. I'm trying to change the unit price with higher quantities. If quantity is above X the unit price should change to a lower price. Quantity discount! — Epsilon
– Epsilon, Commented Jul 15, 2014 at 1:25
Check the updated answer. As you can see, I added an array for discounts. The index of array holds the discount value for that quantity, hence, discount[0] = 0% discount which means, for a quantity 0 there's no discount; furthermore, discount[1] = 5% which means that for a quantity 1, there's a discount of 5% etc. Of course, you may change these values and let's say define discount for quantity 2 and above. In that case the discount array would look like this [0, 0, 5, 10, 15, 20, 25] ... Is it clear :) — hex494D49
– hex494D49, Commented Jul 15, 2014 at 1:51

hex494D49 · Accepted Answer · 2014-07-15 01:44:30Z

Change your HTML and JavaScript parts with the code below

// HTML
<label>Single User</label>
<select class="input-mini" name="singleuser" id="singleuser" onchange="changed(this, 0, 34.95)">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>    
</select>
&nbsp;&nbsp;
<span id="price">@ $34.95/mo</span>

// JavaScript (this is all you need)
var size = 36, cart = [];
var discount = [0, 5, 10, 15, 20, 25, 50];

for(var j = 0; j < size; j++) cart[j] = 0;

function changed(me, id, price){
    var amount = me.options[me.selectedIndex].value;
    var p_discount = amount * price * (discount[me.selectedIndex]/100);  
    var t_price = (amount * price) - p_discount;
    cart[id] = t_price;

    r_price = (Math.round(t_price*100)/100);
    r_price = r_price.toFixed(2);

    document.getElementById('price').innerHTML = '@ ' + r_price + '/mo'; 
}

Check the working jsBin

Collectives™ on Stack Overflow

Javascript onchange - change variable based on select value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related