Link to home
Start Free TrialLog in
Avatar of David Rudlin
David RudlinFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Get row values and calculate in ascx Repeater

On a ascx web page I have a Repeater. The Repeater has a DDL, 3 text boxes and a "Save" button. When a user updates a number in text box "txtRate" or in text box "txtHours" in any row I want a client-side javascript function to multiply the values in those two boxes and put the result in text box "txtCost" in that same row- no postbacks involved - postback will happen when the user clicks "Save". Obviously this calculation must only apply to that particular row.
I have a javacsript function that only fires on the first row of the repeater and no other but then it applies the calculation to the "txtCost" in the SECOND row!

Function and Repeater code are attached. Any advice gratefully received.
function RPTcalculateCost()
    {
        var a = document.getElementById("ctl00$ContentPlaceHolder1$IR$ctl00$rptJobDetails$ctl01$txtRate");
        var b = document.getElementById("ctl00$ContentPlaceHolder1$IR$ctl00$rptJobDetails$ctl02$txtHours");
        var c = document.getElementById("ctl00$ContentPlaceHolder1$IR$ctl00$rptJobDetails$ctl02$txtCost");
        if (b.value == '')
        {
            c.value = 0;
        }
        else
        {
            c.value = parseFloat(a.value) * parseFloat(b.value);
        }
    }   
 
<td colspan="2" style="height: 19px">
                    <asp:Panel runat="server" ID="pnlJobDetails" DefaultButton="btnHidSave">
                        <asp:Repeater ID="rptJobDetails" runat="server">
                            <HeaderTemplate>
                            <table class="CostBox" width="100%">
                                <tr>
                                    <td align="left" style="width: 80px; height: 24px">&nbsp;&nbsp;Staff</td>
                                    <td align="left" style="width: 95px; height: 24px">Staff type</td>
                                    <td align="left" style="width: 55px; height: 24px">Hourly rate</td>
                                    <td align="left" style="width: 35px; height: 24px">Available hours</td>
                                    <td align="left" style="width: 85px; height: 24px">Cost</td>
                                    <td style="height: 24px" >&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</td>
                                </tr>
                                <tr><td colspan="6"></td></tr>
                            </table>
                            <div style="height: 200px; overflow: auto;">
                            <table class="text" width="100%">
                            </HeaderTemplate>
                            <ItemTemplate>
                                <tr>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                        <tr><td>
                                        <div class="os" style="width:80px;overflow:hidden;border-right:1px solid gray">
                                        <asp:DropDownList runat="server" ID="ddlStaff" Enabled="false"  Font-Size="XX-Small" Width="180px"></asp:DropDownList>
                                        </div></td>
                                        </tr></table>
                                    </td>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                        <tr><td>
                                        <div class="os" style="width:80px;overflow:hidden;border-right:1px solid gray">
                                        <asp:DropDownList runat="server" ID="ddlStaffType2" Font-Size="XX-Small" Width="230px" AutoPostBack="true"></asp:DropDownList>
                                        </div></td>
                                        <td><img src="../images/arrow.jpg" /></td></tr></table>
                                    </td>
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtRate" Width="55px" Font-Size="XX-Small" OnKeyUp="javascript:RPTcalculateCost();" Text= <%# DataBinder.Eval(Container.DataItem, "HourlyRate")%>></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="textbox2" ID="txtHours" Width="35px" Font-Size="XX-Small" OnKeyUp="javascript:RPTcalculateCost();" Text= <%# DataBinder.Eval(Container.DataItem, "AvailableHours")%> ></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtCost" Width="75px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "Cost")%> ></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="textbox2" ID="intCount" Visible="false" Width="1px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "interventionCount")%> ></asp:TextBox></td>
                                    <td><asp:Button runat="server" ID="btnDelete" Width="18px" Height="18px" CssClass="button" Text="X" ForeColor=red Font-Bold=true CommandArgument= <%# DataBinder.Eval(Container.DataItem, "ID") %> /></td>
                                    <td><asp:Button runat="server" ID="btnSave" Height="18px" Width="28px" CssClass="button" Text="Save" Font-Size="10px" ToolTip="Save changes" ForeColor="green" Font-Bold="true" CommandArgument= <%# DataBinder.Eval(Container.DataItem, "ID") %> CommandName="save" /></td>
                                    <td><asp:Button runat="server" ID="btnPrintDetail" Width="18px" Height="18px" CssClass="button" Text="?" ForeColor=DarkBlue Font-Bold=true ToolTip="Print details" CommandArgument= <%# DataBinder.Eval(Container.DataItem, "ID") %> CommandName="print" BackColor="LightBlue" Font-Names="Tahoma" /></td>
                                </tr> 
                            </ItemTemplate>
                            <FooterTemplate>
                                </table></div>
                            </FooterTemplate>
                        </asp:Repeater>
                    </asp:Panel>

Open in new window

Avatar of techExtreme
techExtreme
Flag of India image

Say your textboxes are 1 2 and 3.
Now what you can do is,  write javascript for the change event for each textbox,
use the variable 'this' in javascript which gives reference to that particular textbox.

Also Put all 1,2 and 3 in a div. So that when you can get all your textbox references from the div using getelement by tagname with input tag . I hope you understood it.
Only concern you'll have is how to get the div tag,  which u can get from 'this' object's parent which will be div as you are going to place 1,2 and 3 in the div.

I hope I made it almost clear. Let me know if its not. Ofcourse you'll have to write a small complicated looking script, but that's the fun part of it :P


Avatar of David Rudlin

ASKER

Thanks techExtreme.  I have placed the textboxes in the repeater in a div  and constructed a javascript function as follows which obviously is not right as it fills every cell in every row of the Repeater with "Nan" - where am I going wrong?

  <div>
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtRate" Width="55px" Font-Size="XX-Small" OnKeyUp="javascript:RPTcalculateCost(this);" Text= <%# DataBinder.Eval(Container.DataItem, "HourlyRate")%>></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="textbox2" ID="txtHours" Width="35px" Font-Size="XX-Small" OnKeyUp="javascript:RPTcalculateCost(this);" Text= <%# DataBinder.Eval(Container.DataItem, "AvailableHours")%> ></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtCost" Width="75px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "Cost")%> ></asp:TextBox></td>                               </div>



function RPTcalculateCost(invoker)
    {
        debugger;
        var inputElements = document.getElementsByTagName('input');    
        for (var i = 0 ; i < inputElements.length ; i++)
        {
            var myElement = inputElements[i];
            if (myElement.name='txtCost')
            {
               myElement.value = parseFloat(myElement.name.indexOf('txtHours').value) * parseFloat(myElement.name.indexOf('txtRate').value);
            }
        }
    }
Hi,
You are close to what you want. You are getting Nan , which means you are getting
null value in javascript (its called Nan which is acronym for 'Not-A-Number')

It generally happens when you try to use value of textbox for integer calculation or any other purpose, but actually it is blank.

So before using parseFloat on the textbox's value,
just check if the textbox has a value  and then DOUBLE CHECK if its a integer or not,
if everything is ok, then only parse it for number/floating point.  In all other cases, you should not fire your code further below this condition. If its a number then only go ahead and set value or do something.   And this checking you have to do for both of your textbox's values as you are going to multiply them later on.
Hi, also forgot to mention this change:
You are using document.getElementsByTagName('input'); to get your textboxes,
but in reality you are concerned at a particular time by the textboxes of your current row only right? In your current case you are going to get list of all textboxes in your page!

If that's the case and you only want to use calculation on current row's textboxes then as I mentioned in my first post,  say your boxes are 1,2 and 3,  put them in a div say a div with id 'parentDiv'  ,   then you can do  parentDiv.getElementsByTagName('input');   This way you will only get list of textboxes  that are in the parentDiv and not all over the page.

Hope this will simply your problem.
 
P.S. Just to help you out, I have created a simple html page that has three textboxes in a div element and clicking of a button shows their values in alert. TO fetch the values, I have utilized the code I explained to you just now.  Have a look at the file

test1.txt
Many thanks for your help so far. I'm sure it's a basic error I'm making. I have tried to apply your example to my function as shown in the code attached. However when the function hits the 2nd line " var inputElements = divcost.getElementsByTagName('input'); " I get the error: "MS Javascript runtime error. Object doesn't support this property or method". Any idea where I'm going wrong?


  <div id='divcost'>
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtRate" Width="55px" Font-Size="XX-Small" OnKeyUp="javascript:RPTcalculateCost();" Text= <%# DataBinder.Eval(Container.DataItem, "HourlyRate")%>></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="textbox2" ID="txtHours" Width="35px" Font-Size="XX-Small" OnKeyUp="javascript:RPTcalculateCost();" Text= <%# DataBinder.Eval(Container.DataItem, "AvailableHours")%> ></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtCost" Width="75px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "Cost")%> ></asp:TextBox></td>                             
                                    </div> 
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
 
 function RPTcalculateCost()
    {
        var inputElements = divcost.getElementsByTagName('input');     
        for (var i = 0 ; i < inputElements.length ; i++) 
        {
            var myElement = inputElements[i];
            if (myElement.name !='txtCost')
            {
               myElement.value = parseFloat(myElement.name.indexOf('txtHours').value) * parseFloat(myElement.name.indexOf('txtRate').value);
            }
        } 
    }

Open in new window

getElementsByTagName(" ") double quotes
AsishRaj: thank you. I have changed single quotes to double-quotes but I still get the same error msg.

techExtreme: would this problem have anything to do with the Repeater being on an ascx page placed in an aspx page with a master page?
Change your function

input should be the id of the textbox

var inputElementRate = divcost.getElementsByTagName('txtRate');
var inputElementHours = divcost.getElementsByTagName('txtHours');

Open in new window

AsishRaj: thanks for your continued help but still no luck. I get the same error. Latest code is attached including all the Repeater code. Hope you can help. Have also tried both single and double quotes - nothing changes.
function RPTcalculateCost()
    {
     var Rate = divcost.getElementsByTagName('txtRate');
        var Hours = divcost.getElementsByTagName('txtHours');
         var Cost = divcost.getElementsByTagName('txtCost');
    
     Cost.value = parseFloat(Rate.value) * parseFloat(Hours.value);     
    }
 
#####################################################################
 
 <asp:Panel runat="server" ID="pnlJobDetails" DefaultButton="btnHidSave">
                        <asp:Repeater ID="rptJobDetails" runat="server">
                            <HeaderTemplate>
                            <table class="CostBox" width="100%">
                                <tr>
                                    <td align="left" style="width: 80px; height: 24px">&nbsp;&nbsp;Staff</td>
                                    <td align="left" style="width: 95px; height: 24px">Staff type</td>
                                    <td align="left" style="width: 55px; height: 24px">Hourly rate</td>
                                    <td align="left" style="width: 35px; height: 24px">Available hours</td>
                                    <td align="left" style="width: 85px; height: 24px">Cost</td>
                                    <td style="height: 24px" >&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</td>
                                </tr>
                                <tr><td colspan="6"></td></tr>
                            </table>
                            <div style="height: 200px; overflow: auto;">
                            <table class="text" width="100%">
                            </HeaderTemplate>
                            <ItemTemplate>
                                <tr>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                        <tr><td>
                                        <div class="os" style="width:80px;overflow:hidden;border-right:1px solid gray">
                                        <asp:DropDownList runat="server" ID="ddlStaff" Enabled="false"  Font-Size="XX-Small" Width="180px"></asp:DropDownList>
                                        </div></td>
                                        </tr></table>
                                    </td>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                        <tr><td>
                                        <div class="os" style="width:80px;overflow:hidden;border-right:1px solid gray">
                                        <asp:DropDownList runat="server" ID="ddlStaffType2" Font-Size="XX-Small" Width="230px" AutoPostBack="true"></asp:DropDownList>
                                        </div></td>
                                        <td><img src="../images/arrow.jpg" /></td></tr></table>
                                    </td>
                                    <div id='divcost'>
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtRate" Width="55px" Font-Size="XX-Small" OnKeyUp="javascript:RPTcalculateCost();" Text= <%# DataBinder.Eval(Container.DataItem, "HourlyRate")%>></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="textbox2" ID="txtHours" Width="35px" Font-Size="XX-Small" OnKeyUp="javascript:RPTcalculateCost();" Text= <%# DataBinder.Eval(Container.DataItem, "AvailableHours")%> ></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtCost" Width="75px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "Cost")%> ></asp:TextBox></td>                             
                                    </div> 
                                    <td><asp:TextBox runat="server" CssClass="textbox2" ID="intCount" Visible="false" Width="1px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "interventionCount")%> ></asp:TextBox></td>
                                    <td><asp:Button runat="server" ID="btnDelete" Width="18px" Height="18px" CssClass="button" Text="X" ForeColor=red Font-Bold=true CommandArgument= <%# DataBinder.Eval(Container.DataItem, "ID") %> /></td>
                                    <td><asp:Button runat="server" ID="btnSave" Height="18px" Width="28px" CssClass="button" Text="Save" Font-Size="10px" ToolTip="Save changes" ForeColor="green" Font-Bold="true" CommandArgument= <%# DataBinder.Eval(Container.DataItem, "ID") %> CommandName="save" /></td>
                                    <td><asp:Button runat="server" ID="btnPrintDetail" Width="18px" Height="18px" CssClass="button" Text="?" ForeColor=DarkBlue Font-Bold=true ToolTip="Print details" CommandArgument= <%# DataBinder.Eval(Container.DataItem, "ID") %> CommandName="print" BackColor="LightBlue" Font-Names="Tahoma" /></td>                          
                                
                                </tr> 
                            </ItemTemplate>
                            <FooterTemplate>
                                </table></div>
                            </FooterTemplate>
                        </asp:Repeater>
                    </asp:Panel>

Open in new window

what is the error message.
I have attached the function I am experimenting with at the moment. When I debug and reach the 2nd line (i.e "var Rate......) I get the error: "MS Javascript runtime error. Object doesn't support this property or method".
 function RPTcalculateCost()
    {
      var parentDiv = document.getElementById("divcost");    
       var Rate = parentDiv.getElementById('txtRate');
        var Hours = parentDiv.getElementsByTagName('txtHours');
         var Cost = parentDiv.getElementsByTagName('txtCost');
    	    
     Cost.value = parseFloat(Rate.value) * parseFloat(Hours.value);      
    }

Open in new window

try this

function RPTcalculateCost()
    {   
       var Rate = document.getElementById('txtRate');
        var Hours = document.getElementsByTagName('txtHours');
         var Cost = document.getElementsByTagName('txtCost');
    	    
     Cost.value = parseFloat(Rate.value) * parseFloat(Hours.value);      
    }

Open in new window

Thanks AsishRaj but that does nothing I'm afraid.
I am sure there must be an Expert on here who has an answer for this. When the user changes the value in the Rate textbox of ONE row in the Repeater I want the function to recalculate the the total for that ONE row in the Repeater. This must surely be possible!
I am sure there must be an Expert on here who has an answer for this. When the user changes the value in the Rate textbox of ONE row in the Repeater I want the function to recalculate the the total for that ONE row in the Repeater. This must surely be possible!

ps - this must be done client-side with no postback.
Ok Since you asked.

i have tested and its working 100% perfect -

<td><asp:TextBox runat="server"  ID="txtRate" Width="55px" Font-Size="XX-Small" OnKeyDown="javascript:RPTcalculateCost();" Text= "20"></asp:TextBox></td>
<td><asp:TextBox runat="server"  ID="txtHours" Width="35px" Font-Size="XX-Small" OnKeyDown="javascript:RPTcalculateCost();" Text="10"  ></asp:TextBox></td>
<td><asp:TextBox runat="server"  ID="txtCost" Width="75px" Font-Size="XX-Small" Text= "" ></asp:TextBox></td>
**********************************************************************
<script type="text/javascript">
function RPTcalculateCost()
{
document.getElementById('txtCost').value =document.getElementById('txtRate').value * document.getElementById('txtHours').value;
}
</script>

Open in new window

Thanks  AsishRaj but once again I get an error message on the first line of the function:
"MS Javascript runtime error. document.getElementById(...) is null or is not an object".

Remember, the user is changing the value in the "txtRate" textbox in ONE row of the Repeater and the function should then recalculate the value in the "txtCost" textbox just for that ONE row.

Once again, I have attached the design code for the Repeater. The Repeater is placed in a Panel on a ascx page. Hope somebody out there can help.


<asp:Panel runat="server" ID="pnlJobDetails" DefaultButton="btnHidSave">
                        <asp:Repeater ID="rptJobDetails" runat="server">
                            <HeaderTemplate>
                            <table class="CostBox" width="100%">
                                <tr>
                                    <td align="left" style="width: 80px; height: 24px">&nbsp;&nbsp;Staff</td>
                                    <td align="left" style="width: 95px; height: 24px">Staff type</td>
                                    <td align="left" style="width: 55px; height: 24px">Hourly rate</td>
                                    <td align="left" style="width: 35px; height: 24px">Available hours</td>
                                    <td align="left" style="width: 85px; height: 24px">Cost</td>
                                    <td style="height: 24px" >&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</td>
                                </tr>
                                <tr><td colspan="6"></td></tr>
                            </table>
                            <div style="height: 200px; overflow: auto;">
                            <table class="text" width="100%">
                            </HeaderTemplate>
                            <ItemTemplate>
                                <tr>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                        <tr><td>
                                        <div class="os" style="width:80px;overflow:hidden;border-right:1px solid gray">
                                        <asp:DropDownList runat="server" ID="ddlStaff" Enabled="false"  Font-Size="XX-Small" Width="180px"></asp:DropDownList>
                                        </div></td>
                                        </tr></table>
                                    </td>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                        <tr><td>
                                        <div class="os" style="width:80px;overflow:hidden;border-right:1px solid gray">
                                        <asp:DropDownList runat="server" ID="ddlStaffType2" Font-Size="XX-Small" Width="230px" AutoPostBack="true"></asp:DropDownList>
                                        </div></td>
                                        <td><img src="../images/arrow.jpg" /></td></tr></table>
                                    </td>
                                    <div id='divcost'>
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtRate" Width="55px" Font-Size="XX-Small" OnKeyUp="javascript:RPTcalculateCost();" Text= <%# DataBinder.Eval(Container.DataItem, "HourlyRate")%>></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="textbox2" ID="txtHours" Width="35px" Font-Size="XX-Small" OnKeyUp="javascript:RPTcalculateCost();" Text= <%# DataBinder.Eval(Container.DataItem, "AvailableHours")%> ></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtCost" Width="75px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "Cost")%> ></asp:TextBox></td>                             
                                    </div> 
                                    <td><asp:TextBox runat="server" CssClass="textbox2" ID="intCount" Visible="false" Width="1px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "interventionCount")%> ></asp:TextBox></td>
                                    <td><asp:Button runat="server" ID="btnDelete" Width="18px" Height="18px" CssClass="button" Text="X" ForeColor=red Font-Bold=true CommandArgument= <%# DataBinder.Eval(Container.DataItem, "ID") %> /></td>
                                    <td><asp:Button runat="server" ID="btnSave" Height="18px" Width="28px" CssClass="button" Text="Save" Font-Size="10px" ToolTip="Save changes" ForeColor="green" Font-Bold="true" CommandArgument= <%# DataBinder.Eval(Container.DataItem, "ID") %> CommandName="save" /></td>
                                    <td><asp:Button runat="server" ID="btnPrintDetail" Width="18px" Height="18px" CssClass="button" Text="?" ForeColor=DarkBlue Font-Bold=true ToolTip="Print details" CommandArgument= <%# DataBinder.Eval(Container.DataItem, "ID") %> CommandName="print" BackColor="LightBlue" Font-Names="Tahoma" /></td>                          
                                
                                </tr> 
                            </ItemTemplate>
                            <FooterTemplate>
                                </table></div>
                            </FooterTemplate>
                        </asp:Repeater>
                    </asp:Panel>
            

Open in new window

Did you notice i was using onkeydown instead of onKeyUp. Also with the solution that i have given there is no need to <div id='divcost'>

Please cross check the solution that i have posted with what yo have posted. You will get the answer. You need to show some intitiative as well
Another Thing to Note:

If you are populating your fields from db then check if the value is NULL then overwrite it to 0 in the textbox OR ALternatively you can check for Null Value in the Javascript and then perform the Calculation
AsishRaj: thank you for your cotinued support. I have implemented the Repeater and the function exactly as you have advised - see attached code. I have removed the DIV and I have used OnKeyDown - see attached Repeater design code. There are no nulls in the bound data. I still get the error: "MS Javascript runtime error. document.getElementById(...) is null or is not an object"  when the function is run. Believe me, I have tried all variations of your code and my own. I just can't believe that such a simple function can prove so difficult to implement. Any further ideas will be gratefully received.

 
function RPTcalculateCost()
{
document.getElementById('txtCost').value =document.getElementById('txtRate').value * document.getElementById('txtHours').value;
}
 
#######################################################################
     <asp:Panel runat="server" ID="pnlJobDetails" DefaultButton="btnHidSave">
                        <asp:Repeater ID="rptJobDetails" runat="server">
                            <HeaderTemplate>
                            <table class="CostBox" width="100%">
                                <tr>
                                    <td align="left" style="width: 80px; height: 24px">&nbsp;&nbsp;Staff</td>
                                    <td align="left" style="width: 95px; height: 24px">Staff type</td>
                                    <td align="left" style="width: 55px; height: 24px">Hourly rate</td>
                                    <td align="left" style="width: 35px; height: 24px">Available hours</td>
                                    <td align="left" style="width: 85px; height: 24px">Cost</td>
                                    <td style="height: 24px" >&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</td>
                                </tr>
                                <tr><td colspan="6"></td></tr>
                            </table>
                            <div style="height: 200px; overflow: auto;">
                            <table class="text" width="100%">
                            </HeaderTemplate>
                            <ItemTemplate>
                                <tr>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                        <tr><td>
                                        <div class="os" style="width:80px;overflow:hidden;border-right:1px solid gray">
                                        <asp:DropDownList runat="server" ID="ddlStaff" Enabled="false"  Font-Size="XX-Small" Width="180px"></asp:DropDownList>
                                        </div></td>
                                        </tr></table>
                                    </td>
                                    <td>
                                        <table cellpadding="0" cellspacing="0">
                                        <tr><td>
                                        <div class="os" style="width:80px;overflow:hidden;border-right:1px solid gray">
                                        <asp:DropDownList runat="server" ID="ddlStaffType2" Font-Size="XX-Small" Width="230px" AutoPostBack="true"></asp:DropDownList>
                                        </div></td>
                                        <td><img src="../images/arrow.jpg" /></td></tr></table>
                                    </td>                          
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtRate" Width="55px" Font-Size="XX-Small"  OnKeyDown="javascript:RPTcalculateCost();" Text= <%# DataBinder.Eval(Container.DataItem, "HourlyRate")%>></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="textbox2" ID="txtHours" Width="35px" Font-Size="XX-Small" OnKeyDown="javascript:RPTcalculateCost();" Text= <%# DataBinder.Eval(Container.DataItem, "AvailableHours")%> ></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtCost" Width="75px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "Cost")%> ></asp:TextBox></td>                                                               
                                    <td><asp:TextBox runat="server" CssClass="textbox2" ID="intCount" Visible="false" Width="1px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "interventionCount")%> ></asp:TextBox></td>
                                    <td><asp:Button runat="server" ID="btnDelete" Width="18px" Height="18px" CssClass="button" Text="X" ForeColor=red Font-Bold=true CommandArgument= <%# DataBinder.Eval(Container.DataItem, "ID") %> /></td>
                                    <td><asp:Button runat="server" ID="btnSave" Height="18px" Width="28px" CssClass="button" Text="Save" Font-Size="10px" ToolTip="Save changes" ForeColor="green" Font-Bold="true" CommandArgument= <%# DataBinder.Eval(Container.DataItem, "ID") %> CommandName="save" /></td>
                                    <td><asp:Button runat="server" ID="btnPrintDetail" Width="18px" Height="18px" CssClass="button" Text="?" ForeColor=DarkBlue Font-Bold=true ToolTip="Print details" CommandArgument= <%# DataBinder.Eval(Container.DataItem, "ID") %> CommandName="print" BackColor="LightBlue" Font-Names="Tahoma" /></td>                          
                                
                                </tr> 
                            </ItemTemplate>
                            <FooterTemplate>
                                </table></div>
                            </FooterTemplate>
                        </asp:Repeater>
                    </asp:Panel>

Open in new window

Hi, actually its not difficult at all, We must be missing out on something when writing the code. I'll take your example and implement tomorrow during my lunch hour. Meanwhile if you are able to get a solution well and good, else tomorrow I'll come up with something for you.
techExtreme: many thanks. Meanwhile I'll keep trying and let you if I solve it.
yeah as techExtreme said its really simple

Try this replace your function with the one provided below

function RPTcalculateCost(){
       if (isUnsignedInteger(document.getElementById('txtRate').value )< 0)
       {
       document.getElementById('txtCost').value = 0 * document.getElementById('txtHours').value;
       }
       else if(isUnsignedInteger(document.getElementById('txtHours').value )< 0)
       {
       document.getElementById('txtCost').value = 0 * document.getElementById('txtRate').value;
       }
       else
        {
       document.getElementById('txtCost').value = document.getElementById('txtRate').value * document.getElementById('txtHours').value;
       }
    
    }
function isUnsignedInteger(s) {
return (s.toString().search(/^[0-9]+$/) == 0);
}

Open in new window

has it been resolved....i have tried all the possible scenarios but i am unable to generate any of your errors you have mentioned above.


AsishRaj: thank you for your continued support. Your last suggestion did not work I'm afraid. As soon as the first line is encountered (if (isUnsignedInteger(document.getElementById('txtRate').value )< 0)
)  I get the error: "MS Javascript runtime error: Object required". It looks like your function is checking for Null values but this will not be a problem as I know the database will not return null values.
can you post me the full page and code behind as well. So that i can look at what is the error. Also Can you provide sample DB
AsishRaj: EE doesnt seem to allow upload of ascx or vb files. I could email them directly to you otherwise I would have to post the whole lot on here as a Code Snippet. Let me know what's best.
asishraj@gmail.com
ASKER CERTIFIED SOLUTION
Avatar of techExtreme
techExtreme
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
techExtreme: got it at last - many,many thanks. Followed your last post to the letter and got it working - code is attached (relevant code only). Thanks also to AsishRaj for continued support. Cheers guys.

 function RPTcalculateCost(a,b,c,btnSave) //see rptJobDetails_ItemBound
    {
       var Rate = document.getElementById(a);
        var Hours = document.getElementById(b);
        var Cost = document.getElementById(c);
        document.getElementById(btnSave).style.backgroundColor = 'Light Blue';
        if (Hours.value == '' || Rate.value == '')
        {
            Cost.value = 0;
        }
        else
        {
            Cost.value = parseFloat(Rate.value) * parseFloat(Hours.value);
        }
    }
   
#############################################################################
   <asp:Repeater ID="rptJobDetails" runat="server">
                            <HeaderTemplate>                       
                            <div style="height: 200px; overflow: auto;">
                            <table class="text" width="100%">
                            </HeaderTemplate>
                            <ItemTemplate>
                                <tr>                           
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtRate" Width="55px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "HourlyRate")%>></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="textbox2" ID="txtHours" Width="35px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "AvailableHours")%> ></asp:TextBox></td>
                                    <td><asp:TextBox runat="server" CssClass="costbox" ID="txtCost" Width="75px" Font-Size="XX-Small" Text= <%# DataBinder.Eval(Container.DataItem, "Cost")%> ></asp:TextBox></td>                                                                                            
                                </tr> 
                            </ItemTemplate>               
                        </asp:Repeater>
 
################################################################################
Private Sub rptJobDetails_ItemBound(ByVal sender As Object, ByVal e As RepeaterItemEventArgs) Handles rptJobDetails.ItemDataBound
            Try
                If e.Item.ItemType = ListItemType.AlternatingItem Or e.Item.ItemType = ListItemType.Item Then
 
                    Dim txtRate As TextBox = CType(e.Item.FindControl("txtRate"), TextBox)
                    Dim txtHours As TextBox = CType(e.Item.FindControl("txtHours"), TextBox)
                    Dim txtCost As TextBox = CType(e.Item.FindControl("txtCost"), TextBox)
 
                        txtRate.Attributes("onchange") = "RPTcalculateCost('" + txtRate.ClientID + "'" + ",'" + txtHours.ClientID + "','" + txtCost.ClientID + "','" + btnSave.ClientID + "');"
                        txtHours.Attributes("onchange") = "RPTcalculateCost('" + txtRate.ClientID + "'" + ",'" + txtHours.ClientID + "','" + txtCost.ClientID + "');"
            Catch ex As Exception
                cvError.IsValid = False
                cvError.Text = ex.Message
            End Try
        End Sub

Open in new window

See my own final post for the complete coding.
I'm happy to see that you were able to solve the problem. Don't hesitate to post any more queries to EE when needed :P
Happy Coding!