I want, based on selected value to calculate, make an other cost (days * 20) and placed into the nCost.
Really thank you for your time in advance.
Code:
<HTML>
<Head>
<Script type="text/javascript">
var radioCollection, checkedButton;
var frm = document.forms["Cost"];
if(frm){
radioCollection = frm.elements["nEmp"];
if(radioCollection){
/* The collection of like-named radio buttons has a length
property and that is used to limit a for loop:-
*/
for(var c = 0;c < radioCollection.length;c++){
/* The individual radio buttons are accessed as indexed
members of the collection using the loop counter - c
- from the for loop:
*/
if(radioCollection[c].checked){
/* When a radio button element is found with its
checked property set to boolean true a reference
to that element is assigned to the local variable
- checkedButton - and the loop is terminated with
the - break - statement as only one button in a set
of like-named radio buttons will be checked at a
time, so any remaining buttons in the collection
must have checked properties set to false:
*/
checkedButton = radioCollection[c];
break;
}
}
if(checkedButton){
/* I want, based on selected value to calculate, make an other cost (days * 20) and placed into the nCost.
*/
function calcCost(nForm){
var cost = 0;
var n = nform.nEmp.value;
if (n <=200){cost = 4*20}
else if (n > 200 && n < 226){cost = 2*20}
else if (n > 225 && n < 426){cost = 4*20}
else {cost = n*25}
nForm.nCost.value = cost+".00";
}
}
}
}
</Script>
</Head>
<Body>
<Form name='Cost'>
<fieldset id="options">
<legend>Please select </legend>
<ol>
<li><input type="radio" name="nEmp" id="option1" value="225"/><label for="option1">option1 = 2 Days</label> </li>
<li><input type="radio" name="nEmp" id="option2" value="200"/><label for="option2">option2 = 4 Days</label> </li>
<li><input type="radio" name="nEmp" id="option3" value="425"/><label for="option3">options3 = 6 Days</label> </li>
</ol>
</fieldset>
Cost: $<input type='text' name='nCost' size='8' readonly>
<br><br>
<input type='button' value='Calculate' onclick="calcCost(this.form)">
</Form>
</Body>
</HTML>
I have just a couple of notes about good practices:
- use DOCTYPE and try to validate your html with http://validator.w3.org/
- don't capitalise tag names (e.g. form, not Form)
- use JS error console to spot some basic mistakes, such as having calcCost undefined, since it was in a conditional statement
Other that that, you were close. Did you write that JS by yourself? The main problem was conditionally defined function. You couldn't reference it, because at the time of execution, there were no forms or radio buttons yet - one of the solutions could be to put the <script> at the end of the <body> tag.
Another problem is with nform (JS is case-sensitive, so nForm is something else):
nForm.nEmp returns an HTMLCollection of all the 3 inputs, so you can't get a value of that. It's better to use the well-commented approach with for loop. Then i just took the value of the checked input and multiplied it by 20. I understand that is what you want.
[RESOLVED] Form + JS + Calculation
Reply With Quote
Bookmarks