www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Form + JS + Calculation

  1. #1
    Join Date
    Feb 2013
    Posts
    3

    resolved [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>

  2. #2
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    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?

  3. #3
    Join Date
    Feb 2013
    Posts
    3
    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.

  4. #4
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    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";
                    }

  5. #5
    Join Date
    Feb 2013
    Posts
    3
    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>

  6. #6
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    You're welcome. On top of the comments look for Thread tools and mark this Resolved

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles