Monthly Service Calculator
This is a JavaScript method that will calculate and display the cost of any monthly service, subscription, or other items.
This is a JavaScript method that will calculate and display the cost of any monthly service, subscription, or other items.
function calculateCost(radioGroup, userEntry, responseMsg){
var getAmount = document.getElementsByName(radioGroup);
var userCost = document.getElementById(userEntry).value;
var response = '';
for(var i = getAmount.length-1; i > -1; i--) {
if(getAmount[i].checked) {
userAmount = getAmount[i].value;
}
}
if (userCost != "" && !isNaN(userCost) ){
userCost = parseFloat(userCost);
totalCost = (userAmount * userCost) * 30;
response += 'You will save $' + totalCost.toFixed(2) + ' per month!';
}
document.getElementById(responseMsg).innerHTML = response;
return false;
}
/* clear old user values */
function clearData(userEntry, responseMsg){
document.getElementById(userEntry).value = '';
document.getElementById(responseMsg).innerHTML = '';
}
Here is an example of how it is used in an html page that calculates monthly cost of smoking cigarettes.
<form>
<h3>How much will you save per month?</h3>
<!-- Radio Buttons -->
<h3>How many packs per day do you smoke?</h3>
<label for="quarter_pack">
<input type="radio" id="quarter_pack" name="smoke_radio" value=".25"/>
1/4
</label>
<label for="half_pack">
<input type="radio" id="half_pack" name="smoke_radio" value=".50"/>
1/2
</label>
<label for="whole_pack">
<input type="radio" id="whole_pack" name="smoke_radio" value="1"/>
1
</label>
<label for="oneplus_pack">
<input type="radio" id="oneplus_pack" name="smoke_radio" value="1.5"/>
1 1/2
</label>
<label for="two_pack">
<input type="radio" id="two_pack" name="smoke_radio" value="2"/>
2
</label>
<h3>What is the price of a pack of your chosen brand?</h3>
<input name="brand_price" type="text" class="textbox" id="brand_price" onclick="clearData('brand_price', 'response_msg');"/>
<input type="submit" class="submit" name="submit" value="Calculate" onclick="return calculateCost('smoke_radio', 'brand_price', 'response_msg');" />
<h4 id="response_msg"></h4>
</form>