|
JavaScript - Need Help With My Math Total Function; Getting Wrong Amount
I need some help on my math equation, I got the calculations and confirm.submit, and the alert messages to all work properly, but when I go to put the data into the math equation, I am coming up with some outrageous number way off from what it is supposed to be. What I am trying to accomplish is to take the calculated number of day and hours and minutes; multiply the total time in hours by the equipment cost per hour and calculate the total amount of rent. My problem I think is in the calculate total amount of rent section in the script. Please help, your expertise is greatly appreciated.
Below is the math equation in the script section: Code: //calculate days from date field
function checkit() {
var today = new Date();
var nowyear = today.getFullYear();
var d1 = document.forms[0].pickupDate.value.split("/");
var yr = d1[2];
var mm = d1[0]-1;
var dy = d1[1];
var OK1 = checkValidDate(yr,mm,dy);
if ((yr < nowyear || yr > nowyear +1)) {OK1 = false} // only valid for current year and next year
var d2 = document.forms[0].returnDate.value.split("/");
yr = d2[2];
mm = d2[0]-1;
dy = d2[1];
var OK2 = checkValidDate(yr,mm,dy);
if ((yr < nowyear || yr > nowyear+2)) {OK2 = false}
if ((!OK1) || (!OK2)) {
alert ("Invalid dates\(s\) or incorrect format! Please try again.");
document.forms[0].pickupDate.value = "";
document.forms[0].returnDate.value = "";
return false;
}
// arbitrary or example start and end times obtained from elsewhere (select lists)
var fhrs = parseFloat(document.forms[0].pickupHours.value);
var fmins = parseFloat(document.forms[0].pickupMinutes.value);
var shrs = parseFloat(document.forms[0].returnHours.value);
var smins = parseFloat(document.forms[0].returnMinutes.value);
var firstDate = new Date(d1[2],d1[0]-1,d1[1],fhrs,fmins); // note month must be 0-11!! Also note USA date format
var secondDate = new Date(d2[2],d2[0]-1,d2[1],shrs,smins);
var difference = secondDate.getTime() - firstDate.getTime();
var secs = difference/1000;
var days = Math.floor(secs/86400);
secs %= 86400;
var hours= Math.floor(secs/3600);
if (hours<10) {hours = "0" + hours}
secs %= 3600;
var mins = Math.floor(secs/60);
if (mins<10) {mins = "0" + mins}
alert ("Time Difference is " + days + " Days " + hours + " Hours " + mins + " Minutes");
//calculate total amount of rent
var equip = parseFloat(document.forms[0].equipment.value);
var total = (((days * 24) + hours + mins) * equip);
var OK = window.confirm(" The total rental cost is $" + total + "\n Click OK to accept, Cancel to decline");
if (OK) {return true}
else {return false}
}
function checkValidDate(yr,mm,dy) {
var nd = new Date();
nd.setFullYear(yr,mm,dy); // YYYY,MM(0-11),DD
var ndmm = nd.getMonth();
if (ndmm != mm) {
return false;
}
else {
return true;
}
}
This is the form in the body section: Code: <form onsubmit = "return validateForm()" action = "mailto:rogalskibf@gmail.com?subject=ABC Customer Reservation" method="post" enctype="text/plain">
<table border = "0">
<tr>
<td>
Equipment:<br/>
<select name = "equipment">
<option value="unselected">Select Equipment Type</option>
<option value = 20>Fishing Boat</option>
<option value = 15>Kayak</option>
<option value = 2>Mountain Bike</option>
<option value = 10>Scuba Gear</option>
</select>
</td>
</tr>
<tr>
<td>
Pick-up Date: <br/>
<input type = "text" id = "dateIn" name = "pickupDate" id = "date1" onchange = checkValidPDate(this.value)>
</td>
<td>
Pick-up Time: <br/>
<select name = "pickupHours">
<option value="unselected">hr</option>
<option value = 7>07</option>
<option value = 8>08</option>
<option value = 9>09</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
<option value = 13>13</option>
<option value = 14>14</option>
<option value = 15>15</option>
<option value = 16>16</option>
<option value = 17>17</option>
</select>
<select name = "pickupMinutes">
<option value="unselected">min</option>
<option value = 0>00</option>
<option value = .5>30</option>
</select>
</td>
</tr>
<tr>
<td>
Return Date: <br/>
<input type = "text" id = "dateOut" name = "returnDate" id = "date2" onchange = checkValidRDate(this.value)>
</td>
<td>
Return Time: <br/>
<select name = "returnHours">
<option value="unselected">hr</option>
<option value = 7>07</option>
<option value = 8>08</option>
<option value = 9>09</option>
<option value = 10>10</option>
<option value = 11>11</option>
<option value = 12>12</option>
<option value = 13>13</option>
<option value = 14>14</option>
<option value = 15>15</option>
<option value = 16>16</option>
<option value = 17>17</option>
</select>
<select name = "returnMinutes">
<option value="unselected">min</option>
<option value = 0>00</option>
<option value = .5>30</option>
</select>
</td>
</tr>
<tr>
<td>
First Name: <br/>
<input type = "text" name = "firstName"/>
</td>
<td>
Last Name: <br/>
<input type = "text" name = "lastName"/>
</td>
</tr>
<tr>
<td>
Street: <br/>
<input type = "text" name = "street"/>
</td>
<td>
City: <br/>
<input type = "text" name = "city"/>
</td>
<td>
Zip:<br/>
<input type = "text" name = "zip" maxlength = "5"/>
</td>
</tr>
<tr>
<td>
Date of Birth: <br/>
<input type="text" name="date" onblur="checkAge(this.value)" />
</td>
</tr>
<tr>
<td colspan = "3" align = "center">
<input type = "submit" name = "submit" value = "Submit Reservation" onclick = "return checkit()"/>
<input type = "button" value = 'Set Cookies' onclick = "setCookie('anyName', cookieValue ,expDate)">
<input type = "button" value = 'Display Cookies' onclick = "dispCookie('anyName')">
</td>
</tr>
</table>
</form>
Similar TutorialsHi, I am thinking of how to write the code for this: There are 4 textboxes, 3 of which allow you to enter any number (e.g. 1000, 2500, 12345, 100.10, etc.). So whenever I entered a number in one of them (or two or all of them), the 4th read-only textbox will automatically shows the total of the values in the 3 textboxes. So...can anyone give me any references to this? Thanks. Hi, i followed a tutorial online on how to use Javascript to calculate total price. Everything works fine, when all the dropdown select value has it's own value and does not correspond to each other. Eg : Cake Type : Round $4.00 Cake Color : Red $3.00 Cake Filling : Raspberry $4.00 So total is $11.00 The problem comes when you want to add Cake Layers and the price of Cake Color changes based on No of Layers - 1 Layer , 2 Layer and so on. Eg: Cake Layer : Layer 1 $5.00 | Layer 2 $2.50 | Layer 3 $2.50 (for color Orange) Cake Layer : Layer 1 $7.00 | Layer 2 $4.00 | Layer 3 $4.00 (for color Red) Do i have to use if and else conditional statement for every possibility? I am just a beginner. Attached below is the example code i have so far.. Code: var filling_prices= new Array();
filling_prices["None"]=0;
filling_prices["Lemon"]=5;
filling_prices["Custard"]=5;
filling_prices["Fudge"]=7;
filling_prices["Mocha"]=8;
filling_prices["Raspberry"]=10;
function getFillingPrice()
{
var cakeFillingPrice=0;
//Get a reference to the form id="cakeform"
var theForm = document.forms["cakeform"];
//Get a reference to the select id="filling"
var selectedFilling = theForm.elements["filling"];
//set cakeFilling Price equal to value user chose
//For example filling_prices["Lemon".value] would be equal to 5
cakeFillingPrice = filling_prices[selectedFilling.value];
//finally we return cakeFillingPrice
return cakeFillingPrice;
}
This is for the calculation Code: function calculateTotal()
{
//Here we get the total price by calling our function
//Each function returns a number so by calling them we add the values they return together
var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice();
//display the result
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the Cake $"+cakePrice;
}
Some sample of the HTML Code: <select id="filling" name='filling' onchange="calculateTotal()">
<option value="None">Select Filling</option>
<option value="Lemon">Lemon($5)</option>
<option value="Custard">Custard($5)</option>
<option value="Fudge">Fudge($7)</option>
<option value="Mocha">Mocha($8)</option>
<option value="Raspberry">Raspberry($10)</option>
Is there a better way of simplifying this calculation method ? How do i change the price of form values based on selected values on previous dropdown. Thanks in advance. I have a text field. I want the text field to change / be calculated on the action made on the dropdown menu... So if I select Debit card.. it should leave the amount as is.. If I selected Credit Card it should add a percentage to the Amount. Please dont just provide a solutoin.. but please explain as i would love to understand why Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function doMath() {
if (CardType = "cc") {
var one = eval(document.myForm.Amount.value)
var prod = one * 1.03
document.myForm.Amount.value=custRound(prod,2);}
}
else
document.myForm.Amount.value;
function custRound(x,places) {
return (Math.round(x*Math.pow(10,places)))/Math.pow(10,places)
}
</script>
</head>
<body>
<form id="myForm" name="myForm" method="post" action="">
<input name="Amount" type="text" id="Amount" v alue="100" />
<select id="CardType" name="CardType" onchange="doMath();" >
<option value="" selected="selected">Please Select</option>
<option value="dc">Debit Card</option>
<option value="cc">Credit Card</option>
</select>
</form>
</body>
</html>
Hello, let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me. I have this page. http://felixdeportu.com/5/ The images are inside a div#content div#photo. I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean). What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works... i am trying to add a fpwslideshowphp i got it to work but i cant find how to get it off the top of the page, here is code and page http://denniswilsonmusic.com/links.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <table width="965" cellspacing="0" cellpadding="0" border="0"><tr><td style="background-image:url(images/background.jpg); background-position:top center;background-repeat:no-repeat;"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Dennis Wilson -- Castles In The Sand</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <?php include "header.php"; ?> <style type="text/css"> </div> <br /><br><br> ul.fpthumbs{ /*thumbnails main UL list*/ list-style-type:none; margin:0; padding:0; position:absolute; left:100; bottom:10px; width:98%; } ul.fpthumbs li{ display:inline; margin-right:10px; /*spacing between each thumbnail*/ } ul.fpthumbs li img{ border:2px solid white; background:gray; cursor:hand; cursorointer; margin-top:5px; width:50px; height:50px; } ul.fpthumbs li img.selected{ border-color:red; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://www.denniswilsonmusic.com/fpslideshowvar.php" type="text/javascript"></script> <script type="text/javascript" src="fpslideshow.js"> </script> </head> <body> <table width="80%"> <tr><br><br><br><br><br><br><br><br><br><td align="center" width="100%"><div style="position:absolute;z-index:1004;left:3px;top:1000;background:lightblue;padding:3px;font:bold 16px Arial"><a href="index.php" style="color:blue;text-decoration:none">Back To Home Page</a></div> <table width="100%" cellpadding="0" cellspacing="5" style="padding-left:30px;padding-right:30px;"> <tr><td height="19"> </div> </tr></table> <br> <div style="width:965;height:7px;background-color:#D3C5B8;"></div> <table width="955" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td width="450" div="div" class="content_box_fade"><div><br /> <br /> <br /> <br /> </div></td> <td> </td> <td width="450" class="content_box_fade"> </td> </tr><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <?php include "footer.php"; ?> </table></td></tr> </table> </td></tr> </table> </body> </html> I do this for free for this man, and he is profroming in atlanta for 4th, with Rev Charles Stanley thank you for your help For the sample code: Code: <form name=form>
<ul>
<li><input type="text" onkeyUp="calc1();" name=x ></li>
<li><input type="text" onkeyUp="calc2();" name=y ></li>
</ul>
</form>
<script>
function calc1() {
document.form.y.value = (10 * document.form.x.value).toPrecision(5);
}
function calc2() {
document.form.x.value = (0.1 * document.form.y.value).toPrecision(5);
}
</script>
How can I use a checkbox to : (1) Upon check, change the current values to toExponential(5) format (2) Use a different script and/or function that would then calculate with toExponential(5) [as opposed to the hard coded toPrecision(5) in the current functions. (3) Upon unchecking, the result should should go back to Precision and change the function and/or script back to the original. I have created a function but it only half works. I can get the number of contributers to add up but not the total amount of dollars they contributed. I am not sure if my function is wrong or if I am just confused with what variable to output for the dollar amount total. Please assist. My Function: <script type="text/javascript"> function amountTotal() { total = 0; for (var i=0; i<=amount.length; i++) { total+=amount[i]; } return total; } </script> My output files: <div id=totals> <script type="text/javascript"> document.write("<table border=1' cellspacing=1'>"); document.write("<tr><th id=sumTitle colspan=2'>Summary</th></tr>"); document.write("<tr><th>Contributors</th>"); document.write("<td>"+[i]+"</td>"); document.write("</tr>"); document.write("<tr><th>Amount</th>"); document.write("<td>$ +[total]+</td></tr>"); document.write("</table>"); </script> Good day! I am new in javascript function. I have Javascript code for auto calculate here is the code: Code: <script type="text/javascript" language="javascript">
function autocalearn(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, TotEarn = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
TotEarn += val; //accumulate
}
}
var tot=Number(TotEarn) + Number(document.getElementById('Amount').value);
oForm.TotEarn.value = tot.toFixed(2);
//oForm.TotEarn.value = TotEarn.toFixed(2); //out
}
</script>
<!--Total Deduction AutoCompute-->
<script type="text/javascript" language="javascript">
function autocalded(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, TotalDed = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
TotalDed += val; //accumulate
}
}
//oForm.TotalDed.value = TotalDed.toFixed(2); //out
var totded=Number(TotalDed) + Number(document.getElementById('Deductions').value);
oForm.TotalDed.value = totded.toFixed(2);
}
</script>
and now my problem is...I have a textbox for the overall total, and i want it automatic subtract the total earn and total deduction.. I will attach my codes for further understanding. Thank you in advance when user populate info it will appear like this: ------------------------- chkbox | name | number ------------------------- radbtn | MJ | 234123 radbtn | MD | 343543 radbtn | AB | 453466 Is uncertain that how many info will appear as its from database. I am able to enable the radbtn with chkbox by getting radbtn name. How can i enable only the selected radbtn textbox under name and number in order for user to edit it ? thanks anyone who can solve it! I put the following line in the onchange tag of a listbox to use the values to manipulate an iframe: document.getElementById('viewer').src=('Location_Files/')+(this.value)+('.htm') There it works perfectly but I wanted to do more so I decided to build a function around it: function display() { document.getElementById('viewer').src=('Location_Files/')+(this.value)+('.htm') } When I put the function in the onchange tag instead, the iframe tries to work but I get a "can't load page" message like the src is broken. Now when I first made that line it took me hours to figure out that I can't use a "\" because if I do it fails. So I went with "/" and that works but I wonder if that rules change when I specify it in the java script instead of in the onchange tag itself. Either way it still breaks if I try to use "\". Does anyone see the problem? I can't get the function getchecked() to show an alert box... Code: <script>
function getCheckedValue(radioObj) {
if(!radioObj){
return "";
}
var radioLength = radioObj.length;
if(radioLength == undefined){
if(radioObj.checked){
return radioObj.value;
}else{
return "";
}
}
for(var i = 0; i < radioLength; i++) {
if(radioObj[i].checked) {
return radioObj[i].value;
}
}
return "";
}
}
function getchecked(){
var thecode=getCheckedValue(document.forms['radioExampleForm'].elements['code']);
if(thecode!==""){
if(thecode=="HTML"){
alert('Checked value is: '+thecode+'.');
//playSound("test1.mp3");
}else if(thecode=="PHP"){
//playSound("test2.mp3");
alert('Checked value is: '+thecode+'.');
}else{
//playSound("test3.mp3");
alert('Checked value is: nothing');
}
}
}
</script>
<label for="code1"><input type="radio" value="HTML" name="code" id="code1"> HTML</label>
<br><label for="code2"><input type="radio" value="PHP" name="code" id="code2"> PHP</label>
<br><label for="code3"><input type="radio" value="MySQL" name="code" id="code3"> MySQL</label>
<br><input type="button" onclick="getchecked()" value="Show Checked Value">
thanks! Hey there, I started learning Javascript about five weeks ago when I started my University course, and I have been doing above averagely in the little mini-tests, but now I am on coursework I have been having trouble getting past the most simple thing, and I can't help think that I'm just approaching the issue from the wrong angle in my head. I'm not asking to be spoon-fed the answers from veteran coders or cheating because that just defeats the point of learning. In fact I actively discourage anyone from posting a direct answer to this question. However I would like some assistance in the kind of thinking that would help me in term of creating a function like this; Name of function and parameters: index(string,pattern,caseSensitive) "Where pattern starts in string (or -1 if it is not found), return the index. The search needs to be case sensitive if the third parameter is true else it is case insensitive." (Where underlined and italics are parameter names) I know how to create functions in general, however I cannot get my head around the fact that the parameters are supposed to represent something, and it is required for me to program something without knowing what the parameters represent. I know it's simple and I'm probably thinking about it the wrong way. If anyone could assist me I would be grateful. HTML CODE BELOW (JAVASCRIPT CODE FOLLOWS); Code: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Text Object value Property</title>
<script type="text/javascript" src="../jsb-global.js"></script>
<script type="text/javascript" src="jsb-11-02.js"></script>
</head>
<body>
<h1>Text Object value Property</h1>
<form id="UCform" action="make-uppercase.php">
<p>
<input type="text" id="converter" name="converter" value="sample">
</p>
</form>
</body>
</html>
This program below switches what is entered into the text filed to caps when hitting the enter button or the tab button. Can someone explain to me why it is not working. The answer would be helpful to a newbie who's trying hard to learn the fundamentals... Code: // initialize when the page has loaded
window.onload = initialize;
var oInput; // (global) input field to make uppercase
// apply behaviors when document has loaded
function initialize()
{
// do this only if the browser can handle DOM methods
if (document.getElementById)
{
// apply event handler to the button
oInput = document.getElementById('converter');
if (oInput){
var event = oInput.onchange;
upperMe(event);
}
// apply event handler to the form
var oForm = document.getElementById('UCform');
if (oForm)
{
var event = oForm.onsubmit;
upperMe(event);
}
}
}
// make the text UPPERCASE
function upperMe(evt)
{ // consolidate event handling
if (!evt) evt = window.event;
// set input field value to the uppercase version of itself
var sUpperCaseValue = oInput.value.toUpperCase();
oInput.value = sUpperCaseValue;
// cancel default behavior (esp. form submission)
// W3C DOM method (hide from IE)
if (evt.preventDefault) evt.preventDefault();
// IE method
return false;
}
So I want this function to return the date in the format: 4-Jan-2011. I feel like I have to make the variables strings or something but I can't figure it out, I'm kinda new to javascript. Code: function calander(TheDay) {
var theDate = new Date();
var day = new theDate.getDay();
var month = new theDate.getMonth();
var year = new theDate.getFullYear();
if (month == 0) {month = "Jan";}if (month == 1) { month = "Feb"; }
if (month == 2) { month = "March"; }if (month == 3) { month = "April"; }
if (month == 4) { month = "May"; }if (month == 5) { month = "June"; }
if (month == 6) { month = "July"; }if (month == 7) { month = "Aug"; }
if (month == 8) { month = "Sept"; }if (month == 9) { month = "Oct"; }
if (month == 10) { month = "Nov"; }if (month == 11) { month = "Dec"; }
TheDay.value = day + "-" + month + "-" + year;
}
Hi, I am doing a Validation for Form "Text input". If the user leaves the input empty, a function is starting to run. If the field is bigger than 1 - so it doesn't get into the function. The problem is: The first time, the user left the input empty, function ran, and I got the alert - that's OK. Second time, The user added 10 in the AGE input - And again he gets the Alert - But he should not. Note: Age input value, returns from a different function (calc) to a var called: result. this is the code: Code: $(document).ready(function(){
$('#btn_send').click(function(){
//var result gets the value from another function of input "Age" value. -> return thisform.Age.value
var result = calc(document.getElementById("campaignform"));
if (result<1)
{
$("#campaignform").submit(function(event) {
event.preventDefault(); alert ("prevent default");
});
}
else{
return true;
};
});
});
so if you try the second time to click on Submit, then you get into $('#btn_send').click(function() and eventhough you added for example 67 in the AGE (return as result) input, you get into the IF statement which is: if (result<1) I'm pretty new to developing, so I hop you will understand me. Sorry if I have mistakes. Can you advice what could be a better TITLE for this question? thanks in advance, Shai Hi is there a way to only allow a certain numeric amount to be entered into a text input? i.e, Like nothing over 20? Thanks This is probably a really simple question. Is it possible to initialize x amount of variables. Like someone enters 10 into an input box and it makes 10 variables called variable1, variable2, variable3, etc. How would you name them? variable + num = 0; ? Thanks! Hey guys. So I've been learning PHP and MySQLi for the past few weeks and it's going brilliantly! I intend to start learning JS over the Xmas holidays, but right now I only have a very basic knowledge of it. I was just wondering if someone could point me in the right direction on how to do this, as I think i should be pretty easy. After someone changes something in the admin area [e.g. the position of an item] I want to be able to have a small div display at the top of the screen saying something like "Position Updated!" and then have it fade away after 2-3 seconds. Just wondering if there's a fairly easy way to do this, or would I have to go get something like MooTools, etc.? Thanks a lot! So if I have three dollar amounts like .... a = 1,222.00; b = 1,323.00; c = ; d = 1,222.00; How can I alert the highest variable even though there may be 1 or more of them? |
|||||||