calculate two values on fly with javascript / jquery

Question

I have two controls, textbox and dropdown, I want to calculate the sum of those two fields on asp button click. This is what I have: Dropdown Value

<asp:DropDownList ID="DropDownList3" runat="server" CssClass="dropdown" Width="74px">
  <asp:ListItem Text="1" Value="1" />
  <asp:ListItem Text="4" Value="4" />
  <asp:ListItem Text="5" Value="5" />
  <asp:ListItem Text="9" Value="9" />
  <asp:ListItem Text="10" Value="10" />
  <asp:ListItem Text="11" Value="11" />
  <asp:ListItem Text="12" Value="12" />
  <asp:ListItem Text="13" Value="13" />
</asp:DropDownList>

TextBox Value

<asp:TextBox ID="TextBox9" runat="server" CssClass="input-mini" /><br />
<asp:Button ID="Button3" runat="server" Text="Calculate Sum" CssClass="btn btn-minibtn-info" />
Textbox Result <asp:TextBox ID="TextBox10" runat="server" CssClass="input-mini" />

I want on button click to calculate the sum of the dropdown + textbox9 and then put the value in TextBox10. Any idea how can I achieve that?

Paul Fleming · Accepted Answer · 2013-01-22 23:15:06Z

4

Register to client click:

<asp:Button OnClientClick="return ButtonClick();" ... />

JS:

function ButtonClick() {
    var ddlVal = parseInt($('#<%=DropDownList3.ClientID%>').val());
    var tb9Val = parseInt($('#<%=TextBox9.ClientID%>').val());
    $('#<%=TextBox10.ClientID%>').val(ddlVal + tb9Val);

    return false;
}

edited Jan 22, 2013 at 23:15

answered Jan 22, 2013 at 23:07

Paul Fleming

24.6k8 gold badges79 silver badges113 bronze badges

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

4 Comments

A-Dubb Over a year ago

Don't you need the ClientID property in your example? So '#<%=TextBox10.ClientID%>' instead?

A-Dubb Over a year ago

One other thing, I think you'll have to convert the strings into ints via parseInt, otherwise you'll just concatenate the values.

Paul Fleming Over a year ago

@A-Dubb Quite right. I wrote it and didn't quality check. Thanks for the corrections!

A-Dubb Over a year ago

No problem. anything I can do to help. Good answer.

Muhammad Hani · Accepted Answer · 2013-01-22 23:39:43Z

1

$(function() {
            $("#<%=Button3.ClientID%>").click(function() {
            var a = parseInt($('#<%=TextBox9.ClientID%>').val());
            var b = parseInt($('#<%=DropDownList3.ClientID%>').val());
            $('#<%=TextBox10.ClientID%>').val(a + b);
            });
        });

edited Jan 22, 2013 at 23:39

answered Jan 22, 2013 at 23:24

Muhammad Hani

8,6725 gold badges32 silver badges44 bronze badges

1 Comment

MikeSmithDev Over a year ago

You need to be using "#<%=Button3.ClientID%>"... etc. See other answer.

Collectives™ on Stack Overflow

calculate two values on fly with javascript / jquery

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related