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

.NET ProgrammingASP.NET

Avatar of undefined
Last Comment
techExtreme
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
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

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);
            }
        }
    }
Avatar of techExtreme
techExtreme
Flag of India image

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.
Avatar of techExtreme
techExtreme
Flag of India image

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
Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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

Avatar of AsishRaj
AsishRaj
Flag of Fiji image

getElementsByTagName(" ") double quotes
Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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?
Avatar of AsishRaj
AsishRaj
Flag of Fiji image

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

Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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

Avatar of AsishRaj
AsishRaj
Flag of Fiji image

what is the error message.
Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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

Avatar of AsishRaj
AsishRaj
Flag of Fiji image

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

Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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!
Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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.
Avatar of AsishRaj
AsishRaj
Flag of Fiji image

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

Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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

Avatar of AsishRaj
AsishRaj
Flag of Fiji image

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
Avatar of AsishRaj
AsishRaj
Flag of Fiji image

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
Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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

Avatar of techExtreme
techExtreme
Flag of India image

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.
Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

techExtreme: many thanks. Meanwhile I'll keep trying and let you if I solve it.
Avatar of AsishRaj
AsishRaj
Flag of Fiji image

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

Avatar of AsishRaj
AsishRaj
Flag of Fiji image

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.


Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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.
Avatar of AsishRaj
AsishRaj
Flag of Fiji image

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
Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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.
Avatar of AsishRaj
AsishRaj
Flag of Fiji image

asishraj@gmail.com
ASKER CERTIFIED SOLUTION
Avatar of techExtreme
techExtreme
Flag of India image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

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

Avatar of David Rudlin
David Rudlin
Flag of United Kingdom of Great Britain and Northern Ireland image

ASKER

See my own final post for the complete coding.
Avatar of techExtreme
techExtreme
Flag of India image

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!
.NET Programming
.NET Programming

The .NET Framework is not specific to any one programming language; rather, it includes a library of functions that allows developers to rapidly build applications. Several supported languages include C#, VB.NET, C++ or ASP.NET.

137K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo