Form onChange calculation
I have a classic asp form to add products to a site. The form has 3 fields of 'Price', 'Sale' Price and a checkbox for 'On Sa开发者_高级运维le'.
What i'm trying to do is, when a user enters a 'Price' and ticks the 'On Sale' checkbox, some javascript would complete the 'Sale Price' with a value that is 'Price' - 10%.
Wondering if anyone may know how to do this? :D
Thank you.
HTML:
Price:<br>
<input type="text" name="price" id="price"><br>
<br>
Sale price:<br>
<input type="text" name="sale_price" id="sale_price"><br>
<br>
<input type="checkbox" name="on_sale" onchange="calculate_sale_price(this);"> On sale
Javascript:
function calculate_sale_price(checkbox)
{
price = document.getElementById('price');
sale_price = document.getElementById('sale_price');
sale_price.value = checkbox.checked ? price.value * 0.9 : price.value;
}
If you want sale price to be empty if the checkbox is not checked, change this line:
sale_price.value = checkbox.checked ? price.value * 0.9 : price.value;
to:
sale_price.value = checkbox.checked ? price.value * 0.9 : '';
Would be easier with the HTML ;) , something like that would do the trick:
$('#yourCheckBox').change(function(){
if($("#yourCheckBox option:selected").length){
$('#yourSalePrice').val(
$('#yourPrice') - (($('#yourPrice').val()/100)*10)
);
}
});
You could also add some check if theres a Value in Price before calculating anything
As others have shown through their code, you can do this by adding an event listener to the checkbox. It's clean and doesn't get in the way of the ASP form code. Since you put jQuery, here's my take on it; there are of course other solutions but I feel like this an okay combination of concise and readable. Good luck!
$('#chkbox').bind('click', function(evt){
var sale = (evt.target.checked);
var price = $('#fullprice').val();
var disc = (+price > 0 && sale ) ? price*.9 : ''
$('#saleprice').val( disc );
});
I've posted a demo over at: jsbin, based on the following markup:
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('#onSale').change(
function() {
var salePrice = $('#price').val() * 0.9;
$('#salePrice').val(salePrice);
}
);
}
);
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<form method="post" action="">
<fieldset>
<label for="price">Price:</label>
<input type="text" id="price" name="price" />
<input type="text" name="salePrice" id="salePrice" disabled="disabled" />
<input type="checkbox" name="onSale" id="onSale" />
</fieldset>
</form>
</body>
</html>
I'd suggest that you'd need to build in validation for the price entered by the user (make sure it's a numerical price, for a start). I've made the #salePrice disabled so that users are less likely to be able to enter data (though it's not impossible).
Edited in response to OP's comment.
To clear the field after the user un-ticks the checkbox:
$(document).ready(
function() {
$('#onSale').change(
function() {
if ($('#onSale').is(':checked')) {
var salePrice = $('#price').val() * 0.9;
$('#salePrice').val(salePrice);
}
else {
$('#salePrice').val('');
}
}
);
}
);
Note the new if/else, and here's the revised demo
加载中,请稍侯......
精彩评论