CODEWITHSUNDEEP
javascriptasp.net
EM90210
EM90210

Reputation: 135

javascript add two textbox values and display in third

How do I in javascript/asp add two textbox values and display in third? My code is below

 function fill() {
        var txt8 = document.getElementById("TextBox8").value;
        var txt9 = document.getElementById("TextBox9").value;
        document.getElementById("TextBox10").value = txt8 + txt9;


    }

I have onchange="fill" for both TextBox8 and TextBox9

Upvotes: 1

Views: 31078

Answers (5)

Rashedul Alam
Rashedul Alam

Reputation: 199

    function Sum() {
        var text1 = document.getElementById('<%= TextBox1.ClientID %>');
        var text2 = document.getElementById('<%= TextBox2.ClientID %>');
        if (text1.value.length == 0 || text2.value.length == 0) {
            text1.value = 0;
            text2.value = 0;
        }

        var x = parseFloat(text1.value);
        var y = parseFloat(text2.value);          

        document.getElementById('<%= TextBox3.ClientID %>').value = x + y;
    }




<table>
    <tr>
        <td style="width: 100px">
            TextBox1</td>
        <td>
            <asp:TextBox ID="TextBox1" runat="server" onkeyup="Sum()"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            TextBox2</td>
        <td>
            <asp:TextBox ID="TextBox2" runat="server" onkeyup="Sum()"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            TextBox3</td>
        <td>
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
        </td>
    </tr>
    <tr>
        <td>
            &nbsp;</td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            &nbsp;</td>
        <td>
            <asp:Button ID="Button1" runat="server" Text="Show" Width="80px" OnClientClick="Sum()" />
        </td>
    </tr>
</table>

Upvotes: 1

Caner Akdeniz
Caner Akdeniz

Reputation: 1862

why don't you use jQUery? Here is a sample:

function fill(){
var total=Number($('#TextBox9').val()) + Number($('#TextBox9').val());
$('#TextBox10').val(total);
}

Upvotes: 1

Anoop
Anoop

Reputation: 23208

You need to convert string to integer. value always return string. jsfiddle

 <input onchange="fill()"  id=TextBox8 />
<input  onchange="fill()"  id=TextBox9 />
<input  id=TextBox10 /> 
<script>

    function fill() {
        var txt8 = document.getElementById("TextBox8").value-0;
        var txt9 = document.getElementById("TextBox9").value-0;
        document.getElementById("TextBox10").value = txt8 + txt9;


    }
</script>

​

Upvotes: 0

grasingerm
grasingerm

Reputation: 1953

Do you have a set of parentheses following the function call? In javascript if you don't follow a function call with parentheses it assumes you are referencing a variable. Also in the future if you are struggling to debug javascript code you should open up your browsers javascript console to see what is going on and what errors (if any) are thrown.

<input type="text" id="TextBox8" onchange="fill()" />

<input type="text" id="TextBox9" onchange="fill()" />

Upvotes: 0

Musa
Musa

Reputation: 97672

You have to call the function, onchange="fill()" notice the ()

Upvotes: 1

Related Questions