Javascript Select Change Field Price With Discount Onchange

I have an html form with Sub-Total, Discount and Total. The select drop down for Discount has 5%, 10% and 20% values. The select drop down for Sub-Total has $200, $100 and $20 valu

Solution 1:

This should work for you.

JSFiddle

HTML

Discount:
<selectclass="select" name="discount" onchange="updateInput()">
   <option value="5" selected>5% discount</option>
   <option value="10">10% discount</option>
    <option value="20">20% discount</option>
</select>

Price:
<input type="text" name="price" value="">

JavaScript

functionupdateInput(){
    //get the current amount from the 'discount' fieldvar discount = document.getElementsByName("discount")[0].value;
    //get the current amount from the 'price' fieldvar currentPrice = document.getElementsByName("price")[0].value;
    //new price should be "old price" - "discount%" * "old price"document.getElementsByName("price")[0].value =  currentPrice - ((discount/100) * currentPrice);
}

Solution 2:

With jQuery:

$("select").on("change", function() {
    var discount = $(this).val();
    // ensure discount is a number
    discount = parseInt(discount) || 100;

    var price = $("input[name='price']").data("price");
    // ensure price is a number
    price = parseFloat(price) || 0;

    // calculate new price
    price = price * discount / 100;

    // set the price
    $("input[name='price']").val(price.toFixed(2));
});

$(document).ready(function() {
    // store initial price
    $("input[name='price']").data("price", $("input[name='price']").val());

    // trigger change on load to have your initial value
    $("select").trigger("change");
});

Solution 3:

something like this should work:

Essentially you add an event listener to the select element and run some simple code that works out the discounted price, then update the discounted price input value

http://jsbin.com/yafociqoxe/edit?html,js,output

Javascript:

var origPrice = 100;

var discountOption = document.getElementById("discount"),
    discountPrice = document.getElementById("discounted-price");

discountOption.addEventListener('change', function (e) {
  discountPrice.value = origPrice - origPrice * this[this.selectedIndex].value;
});

Html:

<strong>Original Price : $100</strong><br /><br />

  Discount:
<selectclass="select"id="discount"><optionvalue=".05"selected>5% discount</option><optionvalue=".10">10% discount</option><optionvalue=".20">20% discount</option></select><br /><br />
Dicounted Price:
<inputtype="text"id="discounted-price"name="price"value="95">

Solution 4:

here is a link to a jsfiddle if you would like to play with it yourself

Using javascript and html only. This will update the textbox with the value selected onchange.

By setting the onchange attribute on the select tag, you register the updateInput() function as a listener to the onchange event.

Then inside the function you can use document.getElementsByName() to access the elements and manipulate their values. Notice that document.getElementsByName() returns an array-like collection of elements, therefore requiring us to select the first element like so

document.getElementsByName("elementNameGoesHere")[0]

index of the element we want to select goes here --------^

<selectclass="select"name="discount"onchange="updateInput()"><optionvalue="5"selected>5% discount</option><optionvalue="10">10% discount</option><optionvalue="20">20% discount</option></select><selectclass="select"name="cost"onchange="updateInput()"><optionvalue="500"selected>$500</option><optionvalue="100">$100</option><optionvalue="20">$20</option></select><inputtype="text"name="price"value=""><script>functionupdateInput(){
    var discount = document.getElementsByName("discount")[0].value;
    var cost = document.getElementsByName("cost")[0].value;
    document.getElementsByName("price")[0].value = cost - (cost * (discount / 100));
}
</script>

here is a link to a jsfiddle if you would like to play with it yourself