Onfocus() event of Javascript is not calculating textbox value

Question

In my asp.net website I am trying to multiply two textbox value and store it into another textbox. But, my piece of code is not working

The JS:

<script language="javascript">
function myFunction(x)
{
var x = document.getElementById("<%=u_price1.ClientID %>") * document.getElementById("<%=qty1.ClientID %>");
return x;
}
</script>

Textboxes:

<asp:TextBox ID="u_price1" runat="server" Width="63px" CssClass="txt1">0</asp:TextBox>

<asp:TextBox ID="qty1" runat="server" Width="63px" CssClass="txt1">0</asp:TextBox>

<asp:TextBox ID="amt1" runat="server" Width="81px" CssClass="txt1" onfocus="myFunction(this)"></asp:TextBox>

Please tell me whats wrong I am doing here.

Ethan Brown · Accepted Answer · 2013-11-29 21:13:15Z

3

The obvious thing that jumps out at me is you're using the multiply operator (*) against two DOM elements, which will return NaN. That is,

document.getElementById("<%=u_price1.ClientID %>")

Is returning an object, not the numeric value of the contents of that text box. What I think you want to do is get the text box's value:

var x = document.getElementById("<%=u_price1.ClientID %>").value *
    document.getElementById("<%=qty1.ClientID %>").value;

If you want to be really defensive, you can check to make sure they're valid numbers:

var price = Number( document.getElementById("<%=u_price1.ClientID %>").value );
var qty = Number( document.getElementById("<%=qty1.ClientID %>").value );

Then you can check to make sure they're valid numbers:

if( isNaN( price ) || isNaN( qty ) ) {
    // take appropriate error handling action here
}

However, there may be other things going on with your script. I would put a console.log inside myFunction to make sure it's even getting called. If it's not getting called, then something else is wrong, but you definitely have to fix the object multiplication problem.

answered Nov 29, 2013 at 21:13

Ethan Brown

27.4k5 gold badges84 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Umesh Sinha Over a year ago

Function is being called. @Yury after your modification I tried this too. But still its not working.

Teemu Over a year ago

@user3050674 Did you really read Ethan's or Yury's answer? The keyword is value, you can't multiple HTMLElements with each other.

Umesh Sinha Over a year ago

@Teemu Yes I have made necessary changes to it as per the suggestions given. But, in my asp.net page its not working. However, if I try to do anything else like changing the BG of textbox, its works fine.

Ethan Brown Over a year ago

Umesh, "not working" is pretty vague. Are you getting errors on the console? Is the code not executing? Are you not getting the value you're expecting? What are you getting? You can't just say "it's not working" and expect us to be able to magically figure out what's wrong. More details please.

Yury Tarabanko · Accepted Answer · 2013-11-29 21:20:15Z

2

function myFunction(x) {
    var price = parseFloat(document.getElementById("<%=u_price1.ClientID %>").value) || 0,
        qty = parseInt(document.getElementById("<%=qty1.ClientID %>").value, 10) || 0;
    x.value = price * qty.
}

You are multiplying two nodes, while you need values.
You need to convert string values to number.
You need to save the result of computation

edited Nov 29, 2013 at 21:20

answered Nov 29, 2013 at 21:13

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

2 Comments

Umesh Sinha Over a year ago

Thanks for your suggestion. I tried this but still its not working.

Yury Tarabanko Over a year ago

@user3050674 Oh, inline handlers... Updated my answer.

user3051940 · Accepted Answer · 2013-11-30 13:16:46Z

0

you can try this solution...     
<script language="javascript">
        function myFunction()
        {
         var u_price1 = parseInt(document.getElementById("u_price1").value);
         var qty1= parseInt(document.getElementById("qty1").value);
         var x = u_price1 * qty1;
         document.getElementById("amt1").value = x;
        }
        </script>

        <html>
        <body>
        <input type="text" ID="u_price1" name="u_price1"  Width="63px" CssClass="txt1"/>
        <input type="text"  ID="qty1" name="qty1" Width="63px" CssClass="txt1"/>
        <input type="text"  ID="amt1" name="amt1" Width="81px" CssClass="txt1" onfocus="myFunction()"/>
        </body>
        </html>

answered Nov 30, 2013 at 13:16

user3051940

11 bronze badge

Comments

Suresh Amudalapalli · Accepted Answer · 2013-12-01 06:43:02Z

0

I verified it in the HTML and it's working fine.

<html>
<body>
<input type="text" id="first"></input>
<input type="text" id="second"></input>
<input type="text" id="result" onfocus="myFunction(this)"></input>

<script type="text/javascript">
function myFunction(x){
var price = parseFloat(document.getElementById("first").value) || 0,
        qty = parseInt(document.getElementById("second").value, 10) || 0;
    x.value = price * qty;
}
</script>

</body>
</html>

Can you verify it and let me know if you still have issues.

Here is ASP.NET code:

We need to set ClientIDMode=Static for TextBox elements in order to access their fields in javascript other wise their ids will be changed.

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
 <asp:TextBox runat="server" ID="txtinput1" ClientIDMode="Static"></asp:TextBox>
 <asp:TextBox runat="server" ID="txtinput2" ClientIDMode="Static"></asp:TextBox>
 <asp:TextBox runat="server" ID="txtresult" onfocus="myFunction(this)"></asp:TextBox>


    <script type="text/javascript">
        function myFunction(x) {
            var price = parseFloat(document.getElementById("txtinput1").value) || 0,
                    qty = parseInt(document.getElementById("txtinput2").value, 10) || 0;
            x.value = price * qty;
        }
    </script>

</asp:content>

Let me know if this helps. I used onfocus and it works for onblur as well.

edited Dec 1, 2013 at 6:43

answered Nov 30, 2013 at 6:45

Suresh Amudalapalli

231 silver badge7 bronze badges

1 Comment

Umesh Sinha Over a year ago

I am trying to do this in ASP.Net. Well, currently I want to implement it using TextChange event of asp.net. Let me see if it works or not.

Collectives™ on Stack Overflow

Onfocus() event of Javascript is not calculating textbox value

4 Answers 4

4 Comments

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related