Adding two number fields and displaying on another one - xpages

Question

I have the following basic xpage. I wan to add the fields on the reg1 and over1 and show it on total1.
I think I have to update the over1 field to refelect the new value or something like that. It always shows 0.
Any ideas?
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:this.data>
<xp:dominoDocument var="document1" formName="TestHrs"></xp:dominoDocument>
</xp:this.data>
<xp:table style="width:383.0px">
<xp:tr>
<xp:td>Regular</xp:td>
<xp:td>Overtime</xp:td>
<xp:td>Total</xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xe:djNumberTextBox id="reg1"
value="#{document1.rgHr1}">
</xe:djNumberTextBox>
</xp:td>
<xp:td>
<xe:djNumberTextBox id="over1"
value="#{document1.ovHr1}">
<xe:this.onChange><![CDATA[var reg1 = getComponent("reg1").getValue()
var over1 = getComponent("over1").getValue();
getComponent("total1").setValue(reg1 + over1);]]></xe:this.onChange>
</xe:djNumberTextBox>
</xp:td>
<xp:td>
<xe:djNumberTextBox id="total1"
value="#{document1.toHr1}" readOnly="true">
</xe:djNumberTextBox></xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xe:djNumberTextBox id="reg2"
value="#{document1.rgHr2}">
</xe:djNumberTextBox>
</xp:td>
<xp:td>
<xe:djNumberTextBox id="over2"
value="#{document1.ovHr2}">
<xe:this.onChange><![CDATA[#{javascript:var total1 = getComponent("reg2").getValue() + getComponent("over2").getValue();
getComponent("total2").setValue(total2);}]]></xe:this.onChange>
</xe:djNumberTextBox>
</xp:td>
<xp:td>
<xe:djNumberTextBox id="total2"
value="#{document1.toHr2}" readOnly="true">
</xe:djNumberTextBox></xp:td>
</xp:tr>
</xp:table>
</xp:view>

Answer 1

I would recommend not to use ssjs but csjs for this.
In the same event but with client Javascript, sum the values and put the total in the total field.
Keep in mind that as a readonly field, maybe you should check the property "Show disabled control for read-only".
Maybe you will need to do the sum in the querySave event of the document because as a read-only field the value is not updated. Not sure about this.

Answer 2

I find making the change in SSJS works best on an onBlur or onKeyUp, and making sure I'm getting a number (isNaN). CCJS may be better, as you can see from this link http://www.bleedyellow.com/blogs/xpages/entry/how_to_create_column_totals_in_xpages_view_and_repeat_controls?lang=en
I'm putting the post in below for a better answer. And it's not my post, but one I kept for reference.
Cheers,
Brian
In a Notes view it is fairly easy to add a column total, but how is this done in an XPages view control, or a repeat control ? It took me a trip to Lotusphere 2011 to find out.
Example:
We need the totals to: 
1. stay right-aligned under the column that is being totalled, even when the table is being dynamically resized.
2. to show the total of the values from the documents that are being displayed on the page
 
1. For this example we need to add a panel to the tag of the view or repeat control:
<xp:viewPanel id="viewPanel1">
     <xp:this.facets>
          <xp:panel xp:key="footer" id="totals1">
               <xp:tr>
                   <xp:td colspan="7"></xp:td>
                   <xp:td>
                        <xp:text escape="true" id="computedField1">
                    </xp:td>
                   <xp:td colspan="2"></xp:td>
                   <xp:td>
                        <xp:text escape="true" id="computedField2">
                    </xp:td>
                   <xp:td>
                        <xp:text escape="true" id="computedField3">
                    </xp:td>
                 </xp:tr>
             </xp:panel>
       </xp:this.facets>
The trick is in the xp:key property of the panel. Setting this to "footer", as is done for a pager control that you wish to have appear in the footer, allows you to add the extra row. Into this last row of the table that forms the view or repeat control, we place the computed fields. (Note that this example assumes that there are 7 columns before the column titled 'Value')
 
2. Lets assume that we provide a combo box on the XPage to allow the user to filter the documents that will display in the view or repeat control. 
With Firebug, we can see that XPages creates a dynamic id and name for each component. For the combo box it is view:_id1:_id2:_id94:comboBox1.
But notice that all components on a custom control are allocated the same prefix of 'view:_id1:_id2:_id94:' to the name we gave the component:
So we can add the following client-side Javascript code to the 'On Change' event of our combo box:
var fcast = 0;
var i = 0;
var id_prefix = "#{id:comboBox1}".split("comboBox1")[0];
while (dojo.byId(id_prefix+"repeat1:"+i+":inputText3")) {
    var it3= dojo.byId(id_prefix+"repeat1:"+i+":inputText3").innerHTML;
    it3 = it3.replace("$","").replace(/,/gi,"");
    fcast = fcast + parseFloat(it3);
    i++;
}
var tot = formatCurrency(fcast);
dojo.byId(id_prefix+"computedField1").innerHTML = tot;
The third line uses "#{id:comboBox1}" to return the full id given to the comboBox1 field at run time. Please note that this code does not work if placed in a script library.
The while loop starts from the 0 row (first) and loops for every row on the view/repeat control where the inputText3 field exists.
Firebug shows that the values are rendered as span tags, so we need to use .innerHTML to get and set values.
The $ and commas need to be removed using the replace method, so the totals can be accumulated.
Finally, the formatCurrency function rounds to two decimal places and reformats the total with the $ and the commas. (This is a custom function, not shown here.)
Similar code can be created for computedField2 & computedField3.
So, if your customers need a report that shows column totals, or even need a report with filters that show totals, you can make use of these techniques.
Shout out to Paul Hannan and Marie Kehoe for their being the catalyst for this solution.