Javascript Select Change Field Price With Discount Onchange
Solution 1:
This should work for you.
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
Post a Comment for "Javascript Select Change Field Price With Discount Onchange"