How to multiply two Textbox and display result using JavaScript [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 10 months ago.

Improve this question

I am working on a asp.net Web Application. What I want to do in this program is there are three textboxes. When user enter the integer in TextBox1 and TextBox2, it will automatically display the multiplication result in TextBox3. I am not sure how should I do this, this is my code.

JavaScript Code

<script type="text/javascript">
        function multiply() {
            var txt1 = document.getElementById('<%= TextBox1.ClientID %>')
            var txt2 = document.getElementById('<%= TextBox2.ClientID %>')
            var result = txt1.ToString() * txt2.ToString();

            var rstTxtbox = document.getElementById('<%= TextBox3.ClientID %>')


            rstTxtbox = result.toString();
        }
    </script>

Html:

   <div>
        <table>
            <tr>
                <td>
                     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </td>
                <td style="text-align:center">
                    x
                </td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                </td>
            </tr>

            <tr>
                <td colspan="2">
                    <asp:Label ID="Label1" runat="server" Text="Result =  "></asp:Label>
                </td>
                <td>
                   <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                </td>
            </tr>
        </table>

        </div>

what is the current result?

Daniel Casserly
– Daniel Casserly

2016-01-12 15:41:17 +00:00
Commented Jan 12, 2016 at 15:41 — Daniel Casserly
– Daniel Casserly, Commented Jan 12, 2016 at 15:41

frikinside · Accepted Answer · 2016-01-12 15:54:27Z

2

Just replace .ToString() for .value. .ToString() does not exist in javascript.

<script type="text/javascript">
        function multiply() {
            var txt1 = document.getElementById('<%= TextBox1.ClientID %>');
            var txt2 = document.getElementById('<%= TextBox2.ClientID %>');
            var result = txt1.value * txt2.value; //Here changes!

            var rstTxtbox = document.getElementById('<%= TextBox3.ClientID %>');


            rstTxtbox.value = result; //And here!!
        }
    </script>

edited Jan 12, 2016 at 15:54

answered Jan 12, 2016 at 15:49

frikinside

1,2441 gold badge9 silver badges19 bronze badges

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

4 Comments

RedRocket Over a year ago

I can use .value, there is only valueOf

frikinside Over a year ago

Dont trust the intellisense of visual studio on javascript code with the proper extension. Try it first.

RedRocket Over a year ago

thanks for your reply. should I use onkeyup event in my TextBox3 like this? ` <asp:TextBox ID="TextBox3" runat="server" onkeyup= "multiply()"></asp:TextBox>

frikinside Over a year ago

Glad to be helpful! Don't forget to mark an answer as the correct answer

Emil Nik · Accepted Answer · 2016-01-12 15:58:24Z

Your error is in your JavaScript code.

First, you need to select the two values with JavaScript which is done by .value

document.getElementById('<%= TextBox1.ClientID %>').value;

You also don't want to multiply strings. You don't need the .toString() methods.

var result = txt1 * txt2; //In this case txt is not a good name for the variable

Finally you want to change the value of the third textbox. Not the element itself.

var rstTxtbox = document.getElementById('<%= TextBox3.ClientID %>')
rstTxtbox.value = result; 
//I haven't tested this code. If this doesn't work you can try rstTxtbox.innerHTML

I hope this helps you. Your error was that you selected the whole elements but not the values of them.

Also you can add an event to those textboxes. This way you won't need a button to execute the function when it is clicked but you will be able to get a result every time a new value is added. You may try on-change events or something like that.

Collectives™ on Stack Overflow

How to multiply two Textbox and display result using JavaScript [closed]

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related