Link to home
Start Free TrialLog in
Avatar of directxBOB
directxBOBFlag for Ireland

asked on

Error in Javascript Key Press with Textbox

I have an ASP.NET Textbox

<asp:TextBox ID="tb1" runat="server" Width="300px" OnClientKeyPress="CalculateTotal(tb1.ClientID, tb2.ClientID, tb3.ClientID)">0.00</asp:TextBox>

When I run the code and and do the keypress, I get an error message saying that tb1 is not defined. I have also tried to do:

tb1.Attributes.Add("OnKeyPress", "CalculateTotal(tb1.ClientID, tb2.ClientID, tb3.ClientID)")

With no luck... I suspect i am making a rather simple mistake?
Avatar of Pratima
Pratima
Flag of India image

try like this

tb1.Attributes.Add("OnKeyPress", "CalculateTotal(tb1, tb2, tb3)")
can you share code of CalculateTotal() function ?
Avatar of directxBOB

ASKER

   <script type="text/javascript">
        function CalculateTotal(tb1, tb2, tb3) {
            try {
                tb3.value = tb2.value + tb3.value;
            } catch (err) {
            }
        }

        function GetKeyPress() {
            alert("you Pressed " & event.keyCode);
        }
    </script>


Where I used GetKePress to ensure the event was actually working
SOLUTION
Avatar of Praveen Venu
Praveen Venu
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
this will do

<asp:TextBox ID="tb1" runat="server" Width="300px" OnClientKeyPress="CalculateTotal(document.getElementById('<%= tb1.ClientID %>'), document.getElementById('<%= tb2.ClientID %>',document.getElementById('<%=  tb3.ClientID %>')">0.00</asp:TextBox>
 
<script>
function CalculateTotal(a,b,c)
{
  c.value=parseInt(a.value) + parseInt(b.value);
}
 
</script>

Open in new window

OnClientKeyPress="CalculateTotal(document.getElementById('<%= tb1.ClientID %>'), document.getElementById('<%= tb2.ClientID %>'),document.getElementById('<%=  tb3.ClientID %>'))"

This is what the source code looks like when I view it, I added some more brackets as I thought some were missing. I would assume that the problem is now being caused by : <%
SOLUTION
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
can you please try this one also

OnClientKeyPress="CalculateTotal(document.getElementById('<%#  tb1.ClientID %>'), document.getElementById('<%# tb2.ClientID %>'),document.getElementById('<%# tb3.ClientID %>'))"
If you pleace the controls inside another control or a master page then the control name will change. So it is safe to use the clientid. Since client id is server side we need to round it using <%  %>
The ClientID approach seems the more logical, but the issue is that for whatever reason it's not well formed when ASP builds the page:


<input name="ctl00$login_content$tb1" type="text" value="0.00" id="ctl00_login_content_tb1" OnClientKeyPress="CalculateTotal(document.getElementById('<%# tb1.ClientID %>'), document.getElementById('<%# tb2.ClientID %>'),document.getElementById('<%# tb3.ClientID %>'))" style="width:300px;" />

or

 <input name="ctl00$login_content$tb1" type="text" value="0.00" id="ctl00_login_content_tb1" OnClientKeyPress="CalculateTotal(document.getElementById('<%= tb1.ClientID %>'), document.getElementById('<%= tb2.ClientID %>',document.getElementById('<%=  tb3.ClientID %>')" style="width:300px;" />

I suspect the fact that it's '<%= it's trying to treat it as text.
I must point out that the text is being parsed when I post it & lt ;%
SOLUTION
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
ASKER CERTIFIED SOLUTION
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
This is how I got it to work.

Amount.Attributes.Add("onkeyup", "CalculateTotals()")


Cheers for the help lads, gave me the direction I needed.
function CalculateTotals() {
 
            var tbAmount = document.getElementById('Amount').value;
            var tbTax = document.getElementById('Tax').value;
 
            var str = tbAmount;
            str = str.replace(/[_]/g, '');
 
            var tb1 = parseFloat(str, 10);
            if (isNaN(tb1)) tb1 = 0.00;
 
            var str2 = tbTax 
            str2 = str2.replace(/[_]/g, '');
 
            var tb2 = parseFloat(str2, 10);
            if (isNaN(tb2)) tb2 = 0.00;
 
            var total = tb1 + tb2
            document.getElementById('NetTotal').value = total;
        }

Open in new window

ANd how did you define the elements so they had "normal" ids?