javascript select change field price with discount onchange

Question

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 values. Another input text field gets the Total form a calculation on the Sub-Total and Discount.

Discount:
<select class="select" name="discount">
  <option value="5" selected>5% discount</option>
  <option value="10">10% discount</option>
  <option value="20">20% discount</option>
</select>

Sub-Total:
<select class="select" name="discount">
  <option value="100" selected>$100</option>
  <option value="200">$200</option>
  <option value="50">$50</option>
</select>

Total:
<input type="text" name="price" value="<?php echo $db['sellingprice'] ?>">

What I need is:

If the input Sub-Total has a value lets say $100 and the Discount to give the Sub-Total is 10% then the Total should change to $90.

Is there any way to update the total price in the input text box every time whenever the Subtotal Price or Discount values are changed?

the calculation to be done is:

total = subTotal - (subTotal * (discount / 100))

I was able to do something similar with .onmouseout but it isn't working quite how I want it to.

<script>
var discount = 10; 
document.getElementById("sellingprice").onmouseout = function(){
document.getElementById("price").value = parseFloat(document.getElementById("sellingprice").value) * (1.00 - discount)
}
</script>

Answer 1

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 --------^

<select class="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>

<select class="select" name="cost" onchange="updateInput()">
  <option value="500" selected>$500</option>
  <option value="100">$100</option>
  <option value="20">$20</option>
</select>

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

<script>
function updateInput(){
    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

Answer 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");
});

Answer 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:
<select class="select" id="discount">
  <option value=".05" selected>5% discount</option>
   <option value=".10">10% discount</option>
    <option value=".20">20% discount</option>
</select>
<br />
<br />
Dicounted Price:
<input type="text" id="discounted-price" name="price" value="95">

Answer 4

This should work for you.

JSFiddle

HTML

Discount:
<select class="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

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