What loop do I use??? (loops are driving me loopy!!!!)

@jamsigJul 10.2008

Hello people,

I’m building an application for our company intranet and need to figure out what loop to use (if any) and how to do write the code. Heres what I have…

I have 4 fields with a dropdown next to each:
Meter1 | Drpdwn1
Meter2 | Drpdwn2
Meter3 | Drpdwn3
Meter4 | Drpdwn4

Each drpdwn has the same values: Group1 through to Group5

I want to group the totals of each of the text boxes so for example if I have the following:

Meter1 = 50 | Drpdwn1 = Group2
Meter2 = 95 | Drpdwn2 = Group2
Meter3 = 20 | Drpdwn3 = Group3
Meter4 = 59 | Drpdwn4 = Group1

then I want to calculate the following.

Group1 = 59
Group2 = 145
Group3 = 20
Group4 = 0
Group5 = 0

Please help.

Thanks

to post a comment

JavaScript

5 Comments(s) _↴

@FangJul 10.2008 — #Loop through the dropdowns, get the selected value and associated field value, add to running total for that group.

The actual code would depend on the html.

@jamsigauthorJul 10.2008 — #Hey fang,

Thanks for your response. OK heres the HTML I'm using.

[CODE]				<li><label>Meter 1:</label><input type="text" id="fieldMeter1" name="fieldMeter1" onblur="enable(this,'fieldMeter1type')"><select id="fieldMeter1type" name="fieldMeter1type" class="secondFields sub" onchange="enableConvFactor(this, 'fieldGasFactor')" disabled><? echo $meterType ?></select></li>
 <li><label>Meter 2:</label><input type="text" id="fieldMeter2" name="fieldMeter2" onblur="enable(this,'fieldMeter2type')"><select id="fieldMeter2type" name="fieldMeter2type" class="secondFields sub" onchange="enableConvFactor(this, 'fieldGasFactor')" disabled><? echo $meterType ?></select></li>
 <li><label>Meter 3:</label><input type="text" id="fieldMeter3" name="fieldMeter3" onblur="enable(this,'fieldMeter3type')"><select id="fieldMeter3type" name="fieldMeter3type" class="secondFields sub" onchange="enableConvFactor(this, 'fieldGasFactor')" disabled><? echo $meterType ?></select></li>
 <li><label>Meter 4:</label><input type="text" id="fieldMeter4" name="fieldMeter4" onblur="enable(this,'fieldMeter4type')"><select id="fieldMeter4type" name="fieldMeter4type" class="secondFields sub" onchange="enableConvFactor(this, 'fieldGasFactor')" disabled><? echo $meterType ?></select></li>
 [/CODE]

Heres the PHP code for the select values:

[code=php]$meterType=					"<option value='' SELECTED>Please select...</option>
 <option value='Power'>Power (All Inclusive)</option>
 <option value='Power Day'>Power (Night)</option>
 <option value='Power Night'>Power (Day)</option>
 <option value='Power Continuous'>Power (Continuous)</option>
 <option value='Power Controlled'>Power (Controlled)</option>
 <option value='Power Nite only'>Power (Nite only)</option>
 <option value='Gas'>Gas</option>'";
 [/code]

And heres the code where I want the totals to end up:

[CODE]			<li><label>All Inclusive:</label><span id="spanAllInclusiveUnitsTotal">0</span></li>
 <li><label>Continuous:</label><span id="spanContinuousUnitsTotal">0</span></li>
 <li><label>Controlled:</label><span id="spanControlledUnitsTotal">0</span></li>
 <li><label>Nite:</label><span id="spanNiteUnitsTotal"></span>0</li>
 <li><label>Day:</label><span id="spanDayUnitsTotal"></span>0</li>
 <li><label>Night:</label><span id="spanNightUnitsTotal">0</span></li>
 <li><label>Gas:</label><span id="spanGasUnitsTotal"></span>0</li>
 [/CODE]

If you could help it would be much appreciated.

Thank you

J

@FangJul 11.2008 — #I would have to see the generated document or link.

@jamsigauthorJul 14.2008 — #Hi Fang,

Thanks for your replies.

OK here is the code. I removed the css & javascript to give you a basic HTML page.

[CODE]<?
 $meterType=                    "<option value='' SELECTED>Please select...</option>
 <option value='Power'>Power (All Inclusive)</option>
 <option value='Power Continuous'>Power (Continuous)</option>
 <option value='Power Controlled'>Power (Controlled)</option>
 <option value='Power Nite only'>Power (Nite only)</option>
 <option value='Power Day'>Power (Day)</option>
 <option value='Power Night'>Power (Night)</option>
 <option value='Gas'>Gas</option>'"; 
 ?>
 
 
 <label>Meter 1:</label><input type="text" id="fieldMeter1" name="fieldMeter1" ><select id="fieldMeter1type" name="fieldMeter1type" ><? echo $meterType ?></select><br>
 <label>Meter 2:</label><input type="text" id="fieldMeter2" name="fieldMeter2" ><select id="fieldMeter2type" name="fieldMeter2type" ><? echo $meterType ?></select><br>
 <label>Meter 3:</label><input type="text" id="fieldMeter3" name="fieldMeter3" ><select id="fieldMeter3type" name="fieldMeter3type" ><? echo $meterType ?></select><br>
 <label>Meter 4:</label><input type="text" id="fieldMeter4" name="fieldMeter4" ><select id="fieldMeter4type" name="fieldMeter4type" ><? echo $meterType ?></select><br>
 <br>
 <h1>Totals</h1>
 <label>All Inclusive:</label><span id="spanAllInclusiveUnitsTotal">0</span><br>
 <label>Continuous:</label><span id="spanContinuousUnitsTotal">0</span><br>
 <label>Controlled:</label><span id="spanControlledUnitsTotal">0</span><br>
 <label>Nite:</label><span id="spanNiteUnitsTotal">0</span><br>
 <label>Day:</label><span id="spanDayUnitsTotal">0</span><br>
 <label>Night:</label><span id="spanNightUnitsTotal">0</span><br>
 <label>Gas:</label><span id="spanGasUnitsTotal">0</span><br>				[/CODE]

Basically when you enter a figure into any of the meter fields and select a group from the dropdown I want it to calculate the total of that group in the totals.

Thanks for your help.

J

@FangJul 15.2008 — #Changed total id's to make life easier:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;form calculation&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
 
 &lt;script type="text/javascript"&gt;
 function calculate() {
 var f=document.form1;
 var sel=f.getElementsByTagName('select');
 for(var i=0; i&lt;sel.length; i++) {
 if(sel[i].value!='' &amp;&amp; !isNaN(document.getElementById('fieldMeter'+(i+1)).value)) {
 var total=document.getElementById(sel[i].value).firstChild.data;
 document.getElementById(sel[i].value).firstChild.data=parseInt(total)+parseInt(document.getElementById('fieldMeter'+(i+1)).value);
 }
 }
 }
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form action="#" name="form1"&gt;
 &lt;?php
 $meterType=                    "&lt;option value='' SELECTED&gt;Please select...&lt;/option&gt;
 &lt;option value='Power'&gt;Power (All Inclusive)&lt;/option&gt;
 &lt;option value='Power_Continuous'&gt;Power (Continuous)&lt;/option&gt;
 &lt;option value='Power_Controlled'&gt;Power (Controlled)&lt;/option&gt;
 &lt;option value='Power_Nite_only'&gt;Power (Nite only)&lt;/option&gt;
 &lt;option value='Power_Day'&gt;Power (Day)&lt;/option&gt;
 &lt;option value='Power_Night'&gt;Power (Night)&lt;/option&gt;
 &lt;option value='Gas'&gt;Gas&lt;/option&gt;'"; 
 ?&gt;
 
 
 &lt;label&gt;Meter 1:&lt;/label&gt;&lt;input type="text" id="fieldMeter1" name="fieldMeter1" &gt;&lt;select id="fieldMeter1type" name="fieldMeter1type" &gt;&lt;? echo $meterType ?&gt;&lt;/select&gt;&lt;br&gt;
 &lt;label&gt;Meter 2:&lt;/label&gt;&lt;input type="text" id="fieldMeter2" name="fieldMeter2" &gt;&lt;select id="fieldMeter2type" name="fieldMeter2type" &gt;&lt;? echo $meterType ?&gt;&lt;/select&gt;&lt;br&gt;
 &lt;label&gt;Meter 3:&lt;/label&gt;&lt;input type="text" id="fieldMeter3" name="fieldMeter3" &gt;&lt;select id="fieldMeter3type" name="fieldMeter3type" &gt;&lt;? echo $meterType ?&gt;&lt;/select&gt;&lt;br&gt;
 &lt;label&gt;Meter 4:&lt;/label&gt;&lt;input type="text" id="fieldMeter4" name="fieldMeter4" &gt;&lt;select id="fieldMeter4type" name="fieldMeter4type" &gt;&lt;? echo $meterType ?&gt;&lt;/select&gt;&lt;br&gt;
 &lt;br&gt;
 &lt;h1&gt;Totals&lt;/h1&gt;
 &lt;label&gt;All Inclusive:&lt;/label&gt;&lt;span id="Power"&gt;0&lt;/span&gt;&lt;br&gt;
 &lt;label&gt;Continuous:&lt;/label&gt;&lt;span id="Power_Continuous"&gt;0&lt;/span&gt;&lt;br&gt;
 &lt;label&gt;Controlled:&lt;/label&gt;&lt;span id="Power_Controlled"&gt;0&lt;/span&gt;&lt;br&gt;
 &lt;label&gt;Nite:&lt;/label&gt;&lt;span id="Power_Nite_only"&gt;0&lt;/span&gt;&lt;br&gt;
 &lt;label&gt;Day:&lt;/label&gt;&lt;span id="Power_Day"&gt;0&lt;/span&gt;&lt;br&gt;
 &lt;label&gt;Night:&lt;/label&gt;&lt;span id="Power_Night"&gt;0&lt;/span&gt;&lt;br&gt;
 &lt;label&gt;Gas:&lt;/label&gt;&lt;span id="Gas"&gt;0&lt;/span&gt;&lt;br&gt; 
 &lt;button type="button" onclick="calculate()"&gt;calculate&lt;/button&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Also in #JavaScript _↴

[RESOLVED] JavaScript Cookie not working in Firefox Slide Show Tweak Mystery resizing problem in Opera.

Success!

Help @jamsig spread the word by sharing this article on Twitter...

Tweet This

What loop do I use??? (loops are driving me loopy!!!!)

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

What loop do I use??? (loops are driving me loopy!!!!)

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴