Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please. Help with JavaScript Form!

    I dont know what to do, I do not understand whats wrong!! The total doesnt show up and I dont think this form even counts anything. Please!
    This is a form that supposed to count cost for moving services for my web
    Thank you!

    JAVA CODE
    Code:
     var mover_prices = new Array();
     mover_prices["mover1"]=35;
     mover_prices["mover2"]=45;
     mover_prices["mover3"]=70;
     mover_prices["mover4"]=90;
     
     
     var hour_prices= new Array();
     hour_prices["1"]=1;
     hour_prices["2"]=2;
     hour_prices["3"]=3;
     hour_prices["4"]=4;
     hour_prices["5"]=5;
     hour_prices["6"]=6;
     hour_prices["7"]=7;
     hour_prices["8"]=8;
     hour_prices["9"]=9;
     hour_prices["10"]=10;
     hour_prices["11"]=11;
     hour_prices["12"]=12;
     hour_prices["13"]=13;
     
    	 
    	 
    
    function getMoverPrice()
    {  
        var MoverPrice=0;
        
        var theForm = document.forms["moverform"];
        
        var selectedMover = theForm.elements["selectedmover"];
        
        for(var i = 0; i < selectedMover.length; i++)
        {
            
            if(selectedMover[i].checked)
            {
                
                MoverPrice = mover_prices[selectedmover[i].value];
                
                break;
            }
        }
       
        return MoverPrice;
    }
    
    
    function getHoursPrice()
    {
        var MovingHoursPrice=0;
        
        var theForm = document.forms["moverform"];
        
         var selectedHours = theForm.elements["hours"];
         
        
        MovingHoursPrice = hour_prices[selectedHours.value];
    
        
        return MovingHoursPrice;
    }
    
    
    function TravelerCost()
    {
        var TravelCost=0;
        
        var theForm = document.forms["moverform"];
        
        var Travelfee = theForm.elements["Travelfee"];
    
        
        if(Travelfee.checked==true)
        {
            TravelCost=40;
        }
        
        return TravelCost;
    }
    
    function getQuantity()
    {
        
        var theForm = document.forms["moverform"];
        
        var quantity = theForm.elements["quantity"];
        var howmany =0;
        
        if(quantity.value!="")
        {
            howmany = parseInt(quantity.value);
        }
    return howmany;
    }
    
    function getTotal()
    {
        
        var MovingPrice = getMoverPrice() + getHoursPrice() +
                              TravelerCost();
     
        
        document.getElementById('totalPrice').innerHTML =
                                          "Total Price For Move $"+MovingPrice;
    									  
    }
    THIS IS FORM HTML CODE
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <title>MoverFor,</title>
        <script type="text/javascript" src="../formcalculations.js"></script>
        <link href="../cakeform.css" rel="stylesheet" type="text/css" />
    </head>
    
        <div id="wrap">
            <form action="" id="moverform" onsubmit="return false;">
            <div>
                <div class="cont_order">
                   <fieldset>
                    <legend>Calculate you Moving Cost!</legend>
                    <label >movers/hour</label>
                    <label class='radiolabel'><input type="radio"  name="selectedmover" value="mover1" onclick="calculateTotal()" />1 mover/hour</label><br/>
                    <label class='radiolabel'><input type="radio"  name="selectedmover" value="mover2" onclick="calculateTotal()" />2 movers/hour</label><br/>
                    <label class='radiolabel'><input type="radio"  name="selectedmover" value="mover3" onclick="calculateTotal()" />3 movers/hour</label><br/>
                    <label class='radiolabel'><input type="radio"  name="selectedmover" value="mover4" onclick="calculateTotal()" />4 movers/hour</label><br/>
                    <br/>
                    <label >Hours</label>
             
                    <select id="hours" name='hours' onchange="calculateTotal()">
                    <option value="1">1 Hour</option>
                    <option value="2">2 Hours</option>
                    <option value="3">3 Hours</option>
                    <option value="4">4 Hours</option>
                    <option value="5">5 Hours</option>
                    <option value="6">6 Hours</option>
                    <option value="7">7 Hours</option>
                    <option value="8">8 Hours</option>
                    <option value="9">9 Hours</option>
                    <option value="10">10 Hours</option>
                    <option value="11">11 Hours</option>
                    <option value="12">12 Hours</option>
                    <option value="13">13 Hours</option>
                   </select>
                    <br/>
                    <p>
                    <label for='Travelfee' class="inlinelabel">Travel Fee</label>
                   <input type="checkbox" id="Travelfee" name='Travelfee' onclick="calculateTotal()" />
                   </p>
                   
                    Quantity<input type="text"  name="quantity" id="quantity" />
                    </p>
                    <div id="totalPrice"></div>
                    
                    </fieldset>
                </div>
                
            	<div class="cont_details">
                	<fieldset>
                    <legend>Contact Details</legend>
                    <label for='name'>Name</label>
                    <input type="text" id="name" name='name' />
                    <br/>
                    <label for='address'>Address</label>
                    <input type="text" id="address" name='address' />
                    <br/>
                    <label for='phonenumber'>Phone Number</label>
                    <input type="text"  id="phonenumber" name='phonenumber'/>
                    <br/>
                    </fieldset>
                </div>
                <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
            </div>  
           </form>
    	</div><!--End of wrap-->
    
    </body>
    </html>
    Last edited by VIPStephan; 10-02-2012 at 08:49 AM. Reason: added code BB tags

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I count 6 calls to a function called calculateTotal, but I can't see it anywhere... might that be part of the problem?

  • #3
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Amm...it supposed to be only 3......where did you see that?

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Code:
    <label class='radiolabel'><input type="radio" name="selectedmover" value="mover1" onclick="calculateTotal()" />1 mover/hour</label><br/>
    <label class='radiolabel'><input type="radio" name="selectedmover" value="mover2" onclick="calculateTotal()" />2 movers/hour</label><br/>
    <label class='radiolabel'><input type="radio" name="selectedmover" value="mover3" onclick="calculateTotal()" />3 movers/hour</label><br/>
    <label class='radiolabel'><input type="radio" name="selectedmover" value="mover4" onclick="calculateTotal()" />4 movers/hour</label><br/>
    
    <select id="hours" name='hours' onchange="calculateTotal()">
    
    <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
    it could be 3 or it could be 300. If the function doesn't exist, the code is doomed to fail...

  • #5
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am dealing with this first time in my life....what is supposed to be in there? I am sorry, I just really was sitting sooo long on that.....

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it seems to me that your elements are supposed to be calling separate functions which do actually exist...

    Code:
    <label class='radiolabel'><input type="radio" name="selectedmover" value="mover1" onclick="getMoverPrice()" />1 mover/hour</label><br/>
    <label class='radiolabel'><input type="radio" name="selectedmover" value="mover2" onclick="getMoverPrice()" />2 movers/hour</label><br/>
    <label class='radiolabel'><input type="radio" name="selectedmover" value="mover3" onclick="getMoverPrice()" />3 movers/hour</label><br/>
    <label class='radiolabel'><input type="radio" name="selectedmover" value="mover4" onclick="getMoverPrice()" />4 movers/hour</label><br/>
    
    <select id="hours" name='hours' onchange="getHoursPrice()">
    
    <input type="checkbox" id="Travelfee" name='Travelfee' onclick="TravelerCost()" />
    
    <input type='submit' id='submit' value='Submit' onclick="getTotal()" />
    also be aware that javascript is case sensitive, so
    Code:
    MoverPrice = mover_prices[selectedmover[i].value];
    is not the same as
    Code:
    MoverPrice = mover_prices[selectedMover[i].value];
    aside from that, I think your method of calculating is out, but that should at least get you a result

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Quote Originally Posted by Kalinkacs View Post
    JAVA CODE
    Java and Javascript are entirely different programming languages, in spite of the confusingly similar names. Rather like Austria and Australia!

    Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.


    BTW, when posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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