CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   Complex Javascript Array - sum values and insert value into form (http://www.codingforums.com/showthread.php?t=285163)

jmill23 01-02-2013 07:04 PM
Complex Javascript Array - sum values and insert value into form
 
Trying to adapt a rather complex array code. Basically, I want to add the total hours entered, then return the value into input name="total_hrs", but got stuck! Would also appreciate any help to simplify/clean up the script! Thanks. Here's the script:
Quote:
<script language="JavaScript" type="text/javascript">
<!--
function subCalc(the_form)
{
var subtotal = 0;
var subtemp = 0;
var totalHrs = 0;

// put the calories and form fields into parallel arrays.
var calorie_array = new Array()
calorie_array[0] = 72;
calorie_array[1] = 86;
calorie_array[2] = 100;
calorie_array[3] = 126;
calorie_array[4] = 130;
calorie_array[5] = 180;
calorie_array[6] = 156;
calorie_array[7] = 182;
calorie_array[8] = 210;
calorie_array[9] = 250;
calorie_array[10] = 270;
calorie_array[11] = 390;
calorie_array[12] = 390;
calorie_array[13] = 546;

var time_array = new Array()
time_array[0] = the_form.sleeping_time;
time_array[1] = the_form.TV_time;
time_array[2] = the_form.sit_time;
time_array[3] = the_form.cook_time;
time_array[4] = the_form.stand_time;
time_array[5] = the_form.wash_time;
time_array[6] = the_form.walk_S_time;
time_array[7] = the_form.house_time;
time_array[8] = the_form.walk_M_time;
time_array[9] = the_form.gard_time;
time_array[10] = the_form.danc_time;
time_array[11] = the_form.stairs_time;
time_array[12] = the_form.jog_time;
time_array[13] = the_form.sqsh_time;

var sub_array = new Array()
sub_array[0] = the_form.cal0;
sub_array[1] = the_form.cal1;
sub_array[2] = the_form.cal2;
sub_array[3] = the_form.cal3;
sub_array[4] = the_form.cal4;
sub_array[5] = the_form.cal5;
sub_array[6] = the_form.cal6;
sub_array[7] = the_form.cal7;
sub_array[8] = the_form.cal8;
sub_array[9] = the_form.cal9;
sub_array[10] = the_form.cal10;
sub_array[11] = the_form.cal11;
sub_array[12] = the_form.cal12;
sub_array[13] = the_form.cal13;


for(i = 0; i < calorie_array.length; i++)
{
// Give subtemp the value or the calorie times the time.
subtemp = (calorie_array[i] * time_array[i].value);

// Put the converted string into the form field.
sub_array[i].value = checkAmount(subtemp);

// Add the converted number value to subtotal.
subtotal += roundFloat(subtemp);

}
for(i = 0; i < time_array.length; i++)
{
hours = (time_array[i].value);
totalHrs += roundFloat(hours);
}

return subtotal;
}

function totalCalc() {
var form;
var subtotal;
var total;
var totalHrs;
var hours;

form = document.calc_form;
// get the value of subtotal from totalCalc.
subtotal = subCalc(form);
totalHrs = subCalc(form);

// Add the NUMBER values and subtotal.
total = subtotal;

// Convert this number into a string and display.
form.total.value = checkAmount(total);

// Adds total hours.
hours = totalHrs
form.total_hrs.value = checkAmount(hours);
}


function roundFloat(num) {
num = parseFloat(num);
num = Math.round(100*num)/100

return num
}

function checkAmount(num) {
// Convert into a floating point number.
num = parseFloat(num)
// Round the number off.
num = Math.round(100*num)/100
// Turn into a string.
num = String(num)
// Return the converted string.
return num
}

//-->
</script>
And the html:
Quote:
<form name="calc_form" id="form" method="post">
<table width="310" border="0" bgcolor="#EAEAEA">
<tr>
<th width="95"><h2>Activity</h2></th><th width="70"><h2>Time <br>(in hours)</h2></th>
<th width="101"><h2>Calories used per hour</h2></th>
</tr>
<tr class="table-text">
<td class="right"><p class="table-text">Sleeping</p></td>
<td width="70">
<p class="table-text">
<input name="sleeping_time" type="text" id="sleeping_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101">
<p class="table-text">
<input name="cal0" type="text" id="cal0" size="6" maxlength="6" />
kcals</p></td>
</tr>
<tr>
<td class="right"><p class="table-text">Eating/Reading/<br>Watching TV</p></td>
<td width="70"><p class="table-text">
<input name="TV_time" type="text" id="TV_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal1" type="text" id="cal1" size="6" maxlength="6" />
</span>kcals</td>
</tr>
<tr>
<td class="right"><p class="table-text">Sitting</p></td>
<td width="70"><p class="table-text">
<input name="sit_time" type="text" id="sit_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal2" type="text" id="cal2" size="6" maxlength="6" />
kcals</p></td>
</tr>
<tr>
<td class="right"><p class="table-text">Cooking</p></td>
<td width="70"><p class="table-text">
<input name="cook_time" type="text" id="cook_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal3" type="text" id="cal3" size="6" maxlength="6" />
kcals</p></td>
</tr>
<tr>
<td class="right"><p class="table-text">Standing</p></td>
<td width="70"><p class="table-text">
<input name="stand_time" type="text" id="stand_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal4" type="text" id="cal4" size="6" maxlength="6" />
kcals</p></td>
</tr>
<tr>
<td class="right"><p class="table-text">Washing &amp; Dressing</p></td>
<td width="70"><p class="table-text">
<input name="wash_time" type="text" id="wash_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal5" type="text" id="cal5" size="6" maxlength="6" />
kcals</p></td>
</tr>
<tr>
<td class="right"><p class="table-text">Walking Slowly</p></td>
<td width="70"><p class="table-text">
<input name="walk_S_time" type="text" id="walk_S_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal6" type="text" id="cal6" size="6" maxlength="6" />
kcals</p></td>
</tr>
<tr>
<td class="right"><p class="table-text">Light housework</p></td>
<td width="70"><p class="table-text">
<input name="house_time" type="text" id="house_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal7" type="text" id="cal7" size="6" maxlength="6" />
kcals</p></td>
</tr>
<tr>
<td class="right"><p class="table-text">Walking moderately</p></td>
<td width="70"><p class="table-text">
<input name="walk_M_time" type="text" id="walk_M_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal8" type="text" id="cal8" size="6" maxlength="6" />
kcals</p></td>
</tr>
<tr>
<td class="right"><p class="table-text">Light gardening</p></td>
<td width="70"><p class="table-text">
<input name="gard_time" type="text" id="gard_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal9" type="text" id="cal9" size="6" maxlength="6" />
kcals</p></td>
</tr>
<tr>
<td class="right"><p class="table-text">Dancing</p></td>
<td width="70"><p class="table-text">
<input name="danc_time" type="text" id="danc_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal10" type="text" id="cal10" size="6" maxlength="6" />
kcals</p></td>
</tr>
<tr>
<td class="right"><p class="table-text">Walking up stairs</p></td>
<td width="70"><p class="table-text">
<input name="stairs_time" type="text" id="stairs_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal11" type="text" id="cal11" size="6" maxlength="6" />
kcals</p></td>
</tr>
<tr>
<td class="right"><p class="table-text">Jogging</p></td>
<td width="70"><p class="table-text">
<input name="jog_time" type="text" id="jog_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal12" type="text" id="cal12" size="6" maxlength="6" />
kcals</p></td>
</tr>
<tr>
<td class="right"><p class="table-text">Squash</p></td>
<td width="70"><p class="table-text">
<input name="sqsh_time" type="text" id="sqsh_time" size="2" maxlength="2" onchange="subCalc(document.calc_form);" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="cal13" type="text" id="cal13" size="6" maxlength="6" />
kcals</p></td>
</tr>

<tr>
<td><p class="table-text">&nbsp;</p></td>
<td width="70"><p class="table-text"></p></td>
<td width="101"><p class="table-text"></p></td>
</tr>

<tr>
<td><p class="table-text"><strong>Totals = </strong></p></td>
<td width="70"><p class="table-text">
<input name="total_hrs" type="text" id="total_hrs" size="3" />
hrs</p></td>
<td width="101"><p class="table-text">
<input name="total" type="text" id="total" size="6" />
kcals</p></td>
</tr>

<tr>
<td colspan="2"><INPUT name="reset" value="Reset" TYPE="reset"> </td>
<td colspan="2"><input name="Calculate Total" type="button" id="Calculate Total" value="Calculate Total" onclick="totalCalc();" /></td>
</tr>
</table>
</form>

Old Pedant 01-02-2013 07:36 PM
You need to combine your totalCalc and subCalc functions into a single function.

You need subCalc to return TWO DIFFERENT VALUES, and it can't (easily) do that.

Separating them into two functions serves no purpose.

Also, kill your roundFloat() and checkAmount() functions. They aren't doing anything useful that can't be done simpler.

Old Pedant 01-02-2013 08:10 PM
Here's how I would do it. Note that by making your field names more readable you make it easier to give a readable error message when bad values are input.
Code:
<html>
<head>
<script type="text/javascript">
function totalCalc( form )
{
    var activities = {
        sleeping        : 72,
        TV              : 86,
        sitting          : 100,
        cooking          : 126,
        standing        : 130,
        washing          : 180,
        walking_slowly  : 156,
        housework        : 182,
        walking_medium  : 210,
        gardening        : 250,
        dancing          : 270,
        stairs          : 390,
        jogging          : 390,
        squash          : 546
    }

    var totalTime = 0;
    var totalCalories = 0;
    var badFields = [ ];

    for( var act in activities )
    {
        // get time corresponding to each calories value:
        var fld = form[act + "_time"];
        var time = fld.value;
        if ( isNaN(time) )
        {
            badFields.push( act );
            fld.value = "**INVALID**"; // OPTIONAL
            time = 0;
        }
        time /= 60; // convert to hours
        totalTime += time ;

        var calories = activities[act] * time;
        totalCalories += calories;
        form[act + "_calories"].value = calories.toFixed(0);
    }
    form.total_hrs.value = totalTime.toFixed(2);
    form.total.value = totalCalories.toFixed(0);
    var msg = "";
    if ( badFields.length > 0 ) { msg = "Invalid fields: " + badFields; }
    document.getElementById("OOPS").innerHTML = msg;

}
</script>
</head>
<body>
<form id="calc_form">
Enter your times spent at each activity IN MINUTES:<hr/>
Sleeping: <input name="sleeping_time"> <input readonly name="sleeping_calories" size="2"><br/>
TV: <input name="TV_time"> <input readonly name="TV_calories" size="2"><br/>
sitting: <input name="sitting_time"> <input readonly name="sitting_calories" size="2"><br/>
cooking: <input name="cooking_time"> <input readonly name="cooking_calories" size="2"><br/>
standing: <input name="standing_time"> <input readonly name="standing_calories" size="2"><br/>
washing: <input name="washing_time"> <input readonly name="washing_calories" size="2"><br/>
walking slowly: <input name="walking_slowly_time"> <input readonly name="walking_slowly_calories" size="2"><br/>
housework: <input name="housework_time"> <input readonly name="housework_calories" size="2"><br/>
walking medium: <input name="walking_medium_time"> <input readonly name="walking_medium_calories" size="2"><br/>
gardening: <input name="gardening_time"> <input readonly name="gardening_calories" size="2"><br/>
dancing: <input name="dancing_time"> <input readonly name="dancing_calories" size="2"><br/>
stairs: <input name="stairs_time"> <input readonly name="stairs_calories" size="2"><br/>
jogging: <input name="jogging_time"> <input readonly name="jogging_calories" size="2"><br/>
playing squash: <input name="squash_time"> <input readonly name="squash_calories" size="2"><br/>
<hr/>
<span id="OOPS" style="color: red; font-weight: bold;"></span><br/><br/>
Total hours: <input readonly name="total_hrs"/><br/>
Total calories: <input readonly name="total"/><br/>
<hr/>
<input type="button" value="calculate" onclick="totalCalc(this.form)"/>
</form>
</body>
</html>

jmill23 01-02-2013 08:27 PM
Thanks Old Pedant, code looks a lot simpler now, but after trying it's not calculating correctly. Each variable is based on time, activity and a set value. The kcals bit was working ok, but isn't now. The hours is now working in your code but isn't adding up correctly e.g. 1 + 2 hrs is giving a result of 0.05?

jmill23 01-02-2013 08:33 PM
Quote:
Originally Posted by Old Pedant (Post 1303627)
Also, kill your roundFloat() and checkAmount() functions. They aren't doing anything useful that can't be done simpler.
Just removed roundFloat() and checkAmount() functions and it doesn't work as these are linked to by:
// Adds total hours.
hours = totalHrs
form.total_hrs.value = checkAmount(hours);

Old Pedant 01-02-2013 09:38 PM
You didn't read a VERY IMPORTANT PART of my page.

Code:
Enter your times spent at each activity IN MINUTES:<hr/>
If you really want to input in hours instead (who wants to enter 0.25 hours instead of just 15 minutes???) just remove the line that says
Code:
        time /= 60; // convert to hours

Old Pedant 01-02-2013 09:39 PM
Quote:
Originally Posted by jmill23 (Post 1303642)
Just removed roundFloat() and checkAmount() functions and it doesn't work as these are linked to by:
// Adds total hours.
hours = totalHrs
form.total_hrs.value = checkAmount(hours);
** SIGH **

Look at my ALL NEW code.

Where, for example, I do
Code:
    form.total_hrs.value = totalTime.toFixed(2);
    form.total.value = totalCalories.toFixed(0);
(in place of your way-overkill checkAmount() code).

jmill23 01-03-2013 09:16 AM
Quote:
Originally Posted by Old Pedant (Post 1303651)
You didn't read a VERY IMPORTANT PART of my page.

Code:
Enter your times spent at each activity IN MINUTES:<hr/>
If you really want to input in hours instead (who wants to enter 0.25 hours instead of just 15 minutes???) just remove the line that says
Code:
        time /= 60; // convert to hours
Hi,
Thought about that, but the calorie ratios are based on hours of activities.

Thanks.

jmill23 01-03-2013 09:18 AM
Quote:
Originally Posted by Old Pedant (Post 1303652)
** SIGH **

Look at my ALL NEW code.

Where, for example, I do
Code:
    form.total_hrs.value = totalTime.toFixed(2);
    form.total.value = totalCalories.toFixed(0);
(in place of your way-overkill checkAmount() code).
Thanks - I know the script is a bit extensive! That's why I got stuck - I'm not an expert - just trying to adapt it! Could you simplify it so it is shorter as there are scrpits passing through scripts....

Old Pedant 01-03-2013 08:11 PM
Quote:
Originally Posted by jmill23 (Post 1303724)
Hi,
Thought about that, but the calorie ratios are based on hours of activities.

Thanks.
Yes. I know. And that's why, *BEFORE* I multiply the time by the number of calories per hour, I *FIRST DIVIDE BY 60* to convert the minutes into hours.

But as I said, if you want to stick with hours just remove the ONE LINE that I indicated (and of course change the message).

Old Pedant 01-03-2013 08:34 PM
Quote:
Originally Posted by jmill23 (Post 1303725)
Could you simplify it so it is shorter as there are scrpits passing through scripts....
Ummm...I *THOUGHT* that was what I did in my post #3.

Did you actually *TRY* that code???

The HTML isn't as pretty as yours, but it works. I really did test it, you know.

Oh...what the heck. Here. I've add the ability to choose to use hours or minutes. And I've put it online to prove it works.
http://mywhizbang.com/calories.html

You can VIEW-->>SOURCE that page to see the updated code.

jmill23 01-04-2013 08:41 AM
Thanks Old Pedant! It looks good and I did try it before!


All times are GMT +1. The time now is 04:28 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.