Solved

Need JavaScript Help To Sum Fields Based on Dropdown Selection

Posted on 2014-11-20
17
317 Views
Last Modified: 2014-12-08
I have (1) dropdown field named (CAT) that contains (7) items and repeats in (31) rows.  I also have (3) different decimal fields (REG, TIMEHALF, and DBL) which may or may not contain data, that also repeat in the same (31) rows.  Lastly, I have a separate field (BASEBLDGTL) that is not connected to the table, which I want to use to calculate the (3) different decimal fields based on the selection of the dropdown field.  So basically, I'm looking for the BASEBLDGTL field to add all of the REG, TIMEHALF, and DBL fields together for each row if the first item in the dropdown field is selected.  I also want the BASEBLDGTL field to be able to pickup on possible changes to the selection of the CAT dropdown field.  Any help would be very much appreciated as I'm a complete idiot in JavaScript.
0
Comment
Question by:virgo71il
  • 9
  • 7
17 Comments
 
LVL 8

Expert Comment

by:vr6r
ID: 40455867
If you're not already using jquery, I would suggest including it to simplify working with the elements as you describe.

Below is an example of how I would accomplish this...

It fires a calc function when the selection of any of the (CAT) dropdowns change, or when the values of any of the decimal fields changes.  (note: the decimal change event occurs when the element loses focus, ie: when you tab or click away from the field after editing it.)

When the calc function fires it finds any rows whose (CAT) dropdown = "1", and then adds the decimal values in that row to a temp variable.  When the function is done adding up all those rows, it replaces the value of the BASEBLDGTL field, which in this example has an id = "total".

HTML (only set up with 3 rows but you could easily expand this to 31 or as many rows as you need)
<table id="values">
	<tr>
		<th>CAT</th>
		<th>REG</th>
		<th>TIMEHALF</th>
		<th>DBL</th>
	</tr>
	<tr>
		<td>
			<select class="cat">
                <option value=""></option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
			</select>
		</td>
		<td><input type="text" class="reg" value="0.0" /></td>
		<td><input type="text" class="timehalf" value="0.0" /></td>
		<td><input type="text" class="dbl" value="0.0" /></td>
	</tr>
    <tr>
		<td>
			<select class="cat">
				<option value=""></option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
			</select>
		</td>
		<td><input type="text" class="reg" value="0.0" /></td>
		<td><input type="text" class="timehalf" value="0.0" /></td>
		<td><input type="text" class="dbl" value="0.0" /></td>
	</tr>
    <tr>
		<td>
			<select class="cat">
				<option value=""></option>
                <option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
			</select>
		</td>
		<td><input type="text" class="reg" value="0.0" /></td>
		<td><input type="text" class="timehalf" value="0.0" /></td>
		<td><input type="text" class="dbl" value="0.0" /></td>
	</tr>
</table>
<br />
BASEBLDGTL: <input type="text" id="total" value="0" />

Open in new window


JS (using jquery)
$(function(){
    //update total when 'CAT' selection changes
    $('.cat').change(function(e){
        calcRows();
    });
    
    //update total when decimal fields change
    $('.reg, .timehalf, .dbl').change(function(){
        calcRows();
    });
});

function calcRows()
{
    //create var to hold new calculated total
	var total = 0;
    
    //loop through each row whose 'cat' dropdown selection = "1"
    $('.cat option:selected[value="1"]').each(function(ix, el){
		//set var equal to row element
        var tr = $(el).closest('tr');
        
        //add each decimal field in this row to the calc total
		total += parseFloat(tr.find('input.reg').val());
		total += parseFloat(tr.find('input.timehalf').val());
		total += parseFloat(tr.find('input.dbl').val());
	});
    
    //update 'BASEBLDGTL' field with new calc total
    $('#total').val(total);
}

Open in new window


Here is a working example of the above: http://jsfiddle.net/xx675z46/

Hope this helps!
0
 
LVL 1

Author Comment

by:virgo71il
ID: 40455994
vr6r - First of all, thank you so much for helping me with this.  I went to the jsfiddle link/example you provided and it works exactly as I need it to.  I should have mentioned in my post that I'm using Adobe LiveCycle Designer to put together this PDF form.  I put your code in the Base_Bldg_Hrs field on a calculate event, and I can't seem to get it to work.  I've attached the PDF form I'm working on.
Hours-Sheet-Form.pdf
0
 
LVL 44

Expert Comment

by:Karl Heinz Kremer
ID: 40457216
jQuery only works in the context of a web page, not in PDF forms.

Use the following JavaScript as the calculation script for your REGTOTAL field:

var sum = 0;
for (var i=0; i&lt;32; i++) {
    var cat = xfa.resolveNode("CAT[" + i + "]");
    if (cat != null &amp;&amp; cat.rawValue == 1) {
        var val = xfa.resolveNode("REG[" + i + "]");
        if (val != null) {
            sum += val.rawValue;
        }
    }
}
if (sum != 0) {
    this.rawValue = sum;
}
else {
    this.rawValue = "";
}

Open in new window


You would have to adjust the script for your TIMEHALFTOTAL and DBLTOTAL fields by just chaining the way the individual fields are getting references.
0
 
LVL 1

Author Comment

by:virgo71il
ID: 40457450
Karl Heinz Kremer - Thank you also for getting back to me.  Unfortunately, the field I need to sum the REG, TIMEHALF, and DBLT fields based on the CAT selection is Base_Bldg_Hrs.
0
 
LVL 44

Expert Comment

by:Karl Heinz Kremer
ID: 40457481
Then just use the script as the calculation script for the Base_Bldg_Hrs field. There is nothing in the script that is specific to the target field.
0
 
LVL 1

Author Comment

by:virgo71il
ID: 40457698
Karl Heinz Kremer - Yes, I put the code in the Base_Bldg_Hrs field and it's not working.  I'm sorry.
0
 
LVL 44

Expert Comment

by:Karl Heinz Kremer
ID: 40458043
Somehow when I pasted the code, something got changed. Let me try again:

var sum = 0;
for (var i=0; i<32; i++) {
    var cat = xfa.resolveNode("CAT[" + i + "]");
    if (cat != null && cat.rawValue == 1) {
        var val = xfa.resolveNode("REG[" + i + "]");
        if (val != null) {
            sum += val.rawValue;
        }
    }
}
if (sum != 0) {
    this.rawValue = sum;
}
else {
    this.rawValue = "";
}

Open in new window

0
 
LVL 1

Author Comment

by:virgo71il
ID: 40458429
Karl Heinz Kremer - We're almost there.  It's only calculating the 1st field REG, and not including the TIMEHALF, and DBLT fields.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 44

Expert Comment

by:Karl Heinz Kremer
ID: 40458552
Correct, that's why I said "You would have to adjust the script for your TIMEHALFTOTAL and DBLTOTAL fields by just changing the way the individual fields are getting references."
0
 
LVL 1

Author Comment

by:virgo71il
ID: 40462215
Karl Heinz Kremer - I'm sorry but how do I do that?  As I said in my original posting, I'm an idiot in JavaScript.
0
 
LVL 44

Expert Comment

by:Karl Heinz Kremer
ID: 40462234
In line #5 change "REG[" to "TIMEHALF[" and to "DBL[" for the respective fields.
0
 
LVL 1

Author Comment

by:virgo71il
ID: 40462528
Karl Heinz Kremer - Is this what I should have?
 
 topmostSubform.Page1.Base_Bldg_Hrs::calculate - (JavaScript, client)
var sum = 0;
for (var i=0; i<32; i++) {
    var cat = xfa.resolveNode("CAT[" + i + "]");
    if (cat != null && cat.rawValue == 1) {
        var val = xfa.resolveNode("REG[" + i + "]");
        var val = xfa.resolveNode("TIMEHALF[" + i + "]");
        var val = xfa.resolveNode("DBLT[" + i + "]");
        if (val != null) {
            sum += val.rawValue;
        }
    }
}
if (sum != 0) {
    this.rawValue = sum;
}
else {
    this.rawValue = "";
}

Open in new window

0
 
LVL 44

Accepted Solution

by:
Karl Heinz Kremer earned 500 total points
ID: 40462780
No, you need three different scripts, one each for REG, TIMEHALF and DBL. These three scripts are identical with the exception of the original line #5:

var val = xfa.resolveNode("REG[" + i + "]");

Open in new window


You need the following for TIMEHALF:

var val = xfa.resolveNode("TIMEHALF[" + i + "]");

Open in new window


And the following for DBL:

var val = xfa.resolveNode("DBL[" + i + "]");

Open in new window

0
 
LVL 1

Author Comment

by:virgo71il
ID: 40462912
Karl Heinz Kremer  - So the script is now only adding up the DBLT fields and not retaining the values from the REG and TIMEHALF fields.  I need to be able to retain the values from all (3) fields.

var sum = 0;
for (var i=0; i<32; i++) {
    var cat = xfa.resolveNode("CAT[" + i + "]");
    if (cat != null && cat.rawValue == 1) {
        var val = xfa.resolveNode("REG[" + i + "]");
        if (val != null) {
            sum += val.rawValue;
        }
    }
}
if (sum != 0) {
    this.rawValue = sum;
}
else {
    this.rawValue = "";
}
    var sum = 0;
for (var i=0; i<32; i++) {
    var cat = xfa.resolveNode("CAT[" + i + "]");
    if (cat != null && cat.rawValue == 1) {
        var val = xfa.resolveNode("TIMEHALF[" + i + "]");
        if (val != null) {
            sum += val.rawValue;
        }
    }
}
if (sum != 0) {
    this.rawValue = sum;
}
else {
    this.rawValue = "";
}
     var sum = 0;
for (var i=0; i<32; i++) {
    var cat = xfa.resolveNode("CAT[" + i + "]");
    if (cat != null && cat.rawValue == 1) {
        var val = xfa.resolveNode("DBLT[" + i + "]");
        if (val != null) {
            sum += val.rawValue;
        }
    }
}
if (sum != 0) {
    this.rawValue = sum;
}
else {
    this.rawValue = "";
}                 

Open in new window

0
 
LVL 44

Expert Comment

by:Karl Heinz Kremer
ID: 40462921
You need _THREE_ different scripts for the three fields DBLTOTAL, HALFTIMETOTAL and REGTOTAL.
0
 
LVL 1

Author Comment

by:virgo71il
ID: 40462936
Karl Heinz Kremer - I made adjustments to the sum references for each field and it's seems to be working:

 
var sumA = 0;
for (var i=0; i<32; i++) {
    var cat = xfa.resolveNode("CAT[" + i + "]");
    if (cat != null && cat.rawValue == 1) {
        var val = xfa.resolveNode("REG[" + i + "]");
        if (val != null) {
            sumA += val.rawValue;
        }
    }
}
if (sumA != 0) {
    this.rawValue = sumA;
}
var sumB = 0;
for (var i=0; i<32; i++) {
    var cat = xfa.resolveNode("CAT[" + i + "]");
    if (cat != null && cat.rawValue == 1) {
        var val = xfa.resolveNode("TIMEHALF[" + i + "]");
        if (val != null) {
            sumB += val.rawValue;
        }
    }
}
if (sumB != 0) {
    this.rawValue = sumB + sumA;
}
var sumC = 0;
for (var i=0; i<32; i++) {
    var cat = xfa.resolveNode("CAT[" + i + "]");
    if (cat != null && cat.rawValue == 1) {
        var val = xfa.resolveNode("DBLT[" + i + "]");
        if (val != null) {
            sumC += val.rawValue;
        }
    }
}
if (sumC != 0) {
    this.rawValue = sumC + sumB + sumA;
}
else {
    this.rawValue = "";
}                 

Open in new window

0
 
LVL 1

Author Closing Comment

by:virgo71il
ID: 40487098
Karl Heinz Kremer - Thank you so much for your help and patience with me.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

In a previous article published here at Experts Exchange, Signature Image with Transparent Background (http://www.experts-exchange.com/Web_Development/Document_Imaging/A_12380-Signature-Image-with-Transparent-Background.html), I explained how to cre…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this video, we show how to convert an image-only PDF file into a PDF Searchable Image file, that is, a file with both the image (typically from scanning) and text, which is created in an automated fashion with Optical Character Recognition (OCR) …
The viewer will learn how to implement Singleton Design Pattern in Java.

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now