[RESOLVED] Form + JS + Calculation

Hi all, cloud you help me on this form.

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>

Code:

<!DOCTYPE html> <html> <head> <script> function calcCost(nForm){ var cost = 0, radioCollection, checkedButton, frm = document.forms["Cost"]; if(frm) { radioCollection = frm.elements["nEmp"]; if(radioCollection){ for(var c = 0;c < radioCollection.length;c++){ if(radioCollection[c].checked){ checkedButton = radioCollection[c]; } } if (checkedButton){ cost = checkedButton.value * 20; nForm.nCost.value = cost+".00"; } } } } </script> <title>untitled</title> </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.

Good?

Really thank you for your answer.
That I want is a little different,

Code:

if (n <=200){cost = 4*20} else if (n > 200 && n < 226){cost = 2*20} else if (n > 225 && n < 426){cost = 6*20}

If the value is 200 then the cost is 80
If the value is 225 then the cost is 40
If the value is 425 then the cost is 120

Please advice.

Ok, i wasn't sure, but you can easily change that. Just assign the checkedButton.value to n:

Code:

if (checkedButton){ n = checkedButton.value; if (n <=200){cost = 4*20} else if (n > 200 && n < 226){cost = 2*20} else if (n > 225 && n < 426){cost = 6*20} nForm.nCost.value = cost+".00"; }

Thank you !! you are a saver.

For future reference to anyone who will need 2nd calculation based on 1st value selection here are the final working code:

Code:

<!DOCTYPE html> <html> <head> <script> function calcCost(nForm){ var cost = 0, radioCollection, checkedButton, frm = document.forms["Cost"]; if(frm) { radioCollection = frm.elements["nEmp"]; if(radioCollection){ for(var c = 0;c < radioCollection.length;c++){ if(radioCollection[c].checked){ checkedButton = radioCollection[c]; } } if (checkedButton){ n = checkedButton.value; if (n <=200){cost = 4*20} else if (n > 200 && n < 226){cost = 2*20} else if (n > 225 && n < 426){cost = 6*20} nForm.nCost.value = cost+".00"; } } } } </script> <title>untitled</title> </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>

You're welcome. On top of the comments look for Thread tools and mark this Resolved :cool: