Javascript Select Change Field Price With Discount Onchange

July 20, 2022 Post a Comment

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:
<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);
}

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:
<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">

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

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