...

View Full Version : Please. Help with JavaScript Form!



Kalinkacs
10-01-2012, 11:04 PM
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

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

<!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>

xelawho
10-01-2012, 11:10 PM
I count 6 calls to a function called calculateTotal, but I can't see it anywhere... might that be part of the problem?

Kalinkacs
10-01-2012, 11:19 PM
Amm...it supposed to be only 3......where did you see that?

xelawho
10-01-2012, 11:27 PM
<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...

Kalinkacs
10-01-2012, 11:37 PM
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.....

xelawho
10-02-2012, 12:32 AM
it seems to me that your elements are supposed to be calling separate functions which do actually exist...



<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

MoverPrice = mover_prices[selectedmover[i].value];
is not the same as

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

Philip M
10-02-2012, 08:48 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum