CODEWITHSUNDEEP
c#htmlasp.net
user2420635
user2420635

Reputation:

update textbox when changed without refreshing

I'm working on my own aspx program and now i have a calculator which i want to be able to fill in some values and when you press tab to the next value and fill it in it will automatically calculate and write it into a textbox(or label). this must be without having to refresh the page. would this be possible in combination with c# or would i need to look for php + ajax to get this done?

i had the following coded:

<asp:TextBox ID="tbx_rms" onchanged="textboxcalc" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_volt" onchanged="textboxcalc" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_anw1" Enabled="false" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_anw2" Enabled="false" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_eff" onchanged="textboxcalc" runat="server"></asp:TextBox>    
<asp:TextBox ID="tbx_anw3" Enabled="false"  runat="server"></asp:TextBox>

and this is the c# code:

public void textboxcalc(object sender, EventArgs e)
    {
        if (tbx_rms.Text != "" && tbx_volt.Text != "")
        {
            double rms = Convert.ToDouble(tbx_rms.Text);
            double volt = Convert.ToDouble(tbx_volt.Text);
            double ant = Convert.ToDouble(rms / volt);
            if (tbx_eff.Text != "")
            {
                double effi = Convert.ToDouble(tbx_eff.Text);
                double tot = Convert.ToDouble((effi / ant) * 100);
                tbx_anw3.Text = Convert.ToString(tot);
            }
            tbx_anw1.Text = Convert.ToString(ant);
            tbx_anw2.Text = Convert.ToString(ant);

        }

I hope it is clear enough what my intentions are and if not i will happily answer any questions.

Upvotes: 2

Views: 7136

Answers (6)

Bat_Programmer
Bat_Programmer

Reputation: 6851

You can achieve this by using UpdatePanel with control triggers and setting AutoPostback="true" for the textboxes that caused the event. 

<asp:TextBox ID="tbx_rms" onchanged="textboxcalc" AutoPostback="true" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_volt" onchanged="textboxcalc" AutoPostback="true" runat="server"></asp:TextBox>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="tbx_rms" />
        <asp:AsyncPostBackTrigger ControlID="tbx_volt" />
        <asp:AsyncPostBackTrigger ControlID="tbx_eff" />
    </Triggers>
    <ContentTemplate>
      <asp:TextBox ID="tbx_anw1" Enabled="false" runat="server"></asp:TextBox>
      <asp:TextBox ID="tbx_anw2" Enabled="false" runat="server"></asp:TextBox>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:TextBox ID="tbx_eff" onchanged="textboxcalc" AutoPostback="true" runat="server"></asp:TextBox>    
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="tbx_rms" />
        <asp:AsyncPostBackTrigger ControlID="tbx_volt" />
        <asp:AsyncPostBackTrigger ControlID="tbx_eff" />
    </Triggers>
    <ContentTemplate>
        <asp:TextBox ID="tbx_anw3" Enabled="false" runat="server"></asp:TextBox>
    </ContentTemplate>
</asp:UpdatePanel>

Upvotes: 1

user2420635
user2420635

Reputation:

after listening to the comments i just went ahead and used javascript to make this calculation.

<script type="text/javascript">
    function calctxtboxes() {
        var rms = document.getElementById('<%=tbx_rms.ClientID%>').value;
        var volt = document.getElementById('<%=tbx_volt.ClientID%>').value;
        var effi = document.getElementById('<%=tbx_eff.ClientID%>').value;
        if (rms != "" && volt !="") {
            var ant = rms / volt;
            document.getElementById('tbx_anw1').value = ant;
            document.getElementById('tbx_anw2').value = ant;
            if (effi != "") {
                var total = (ant / effi)*100;
                document.getElementById('tbx_anw3').value = total;
            }
        }
    }
</script>

and the aspx like this:

<asp:TextBox ID="tbx_rms" onchange="calctxtboxes()" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_volt" onchange="calctxtboxes()" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_anw1" Enabled="false" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_anw2" Enabled="false" runat="server"></asp:TextBox>
<asp:TextBox ID="tbx_eff" onchange="calctxtboxes()" runat="server"></asp:TextBox>    
<asp:TextBox ID="tbx_anw3" Enabled="false"  runat="server"></asp:TextBox>

Upvotes: 2

Mr. Mr.
Mr. Mr.

Reputation: 4285

Firstly, PHP is not required, C# is not really required either unless you want to do something when the value gets back to the server, JavaScript is the best option for you, of the 3 that have been mentioned. If you are doing Mathematics be aware that JavaScript does not always behave the same way as C# does with regard to rounding and possibly other types of mathematics, but I have experienced rounding quirks between both languages.

If you can cause you textbox to be updated via some client script (probably a form of JavaScript) then all you would be required to do as a user is click the submit button and the value will be sent back to the server as it already does, assuming you want the value sent back to the server.

Simply implement the calculation you have already in C# in a client script so the textbox is updated, then postback the value by clicking on the submit button, capture the value and do what you want with it. Note, the textbox you are putting the calculation in already exists in the code so your value will be sent back to server when you click the existing submit button, again, assuming you want the value to be posted back to the server.

If you are unsure how to do this then implement what you know how to do and comment back here about what you have done by updating your question with the new code you have created, specify where you are stuck and we can direct you further with the problem.

You will want to use a library for doing the JavaScript, but here is an example I have just written for you to play with, you probably won't want to use it for your stuff as I am sure is is pretty awful in its implementation, but it should help you see a little of what it should be like in terms of amount of code required and simplicity, should also show you that the C# approach is a bit too much for what you are wanting to do.

<html>
    <head>
        <title>Calculations</title>
        <script type="text/javascript">
        function UpdateCalculation(f)
        {
            if (f.tbx_rms.value !== "" && f.tbx_volt.value !== "")
            {
                var rms = f.tbx_rms.value;
                var volt = f.tbx_volt.value;
                var ant = rms / volt;

                if (f.tbx_eff.value !== "")
                {
                    var effi = f.tbx_eff.value;
                    var tot = (effi / ant) * 100;
                    f.tbx_anw3.value = tot;
                }
                f.tbx_anw1.value = ant;
                f.tbx_anw2.value = ant;
            }
        }
        </script>
    </head>
    <body>
        <form name="calcForm">
            <input type="input" id="tbx_rms" name="tbx_rms" onchange="javascript:UpdateCalculation(calcForm)" />
            <input type="input" id="tbx_volt" name="tbx_volt" onchange="javascript:UpdateCalculation(calcForm)" />
            <input type="input" id="tbx_anw1" name="tbx_anw1" />
            <input type="input" id="tbx_anw2" name="tbx_anw2" />
            <input type="input" id="tbx_eff" name="tbx_eff" onchange="javascript:UpdateCalculation(calcForm)" />
            <input type="input" id="tbx_anw3" name="tbx_anw3" />
        </form>
    </body>
</html>

Upvotes: 0

nik0lai
nik0lai

Reputation: 2655

I've used this plugin in my previous projects

http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

As you can see by the examples it's pretty straight forward, you may want to lookup jQuery selectors as well. For simple calculations like yours, as stated above using server side to calculate it maybe overkill.

Upvotes: 0

Furqan Ashraf
Furqan Ashraf

Reputation: 40

use ajax in asp.net by using update panel you can achieve this functionality.

Upvotes: 0

Jason P
Jason P

Reputation: 27012

You could use an UpdatePanel control. The refresh would be done using ajax behind the scenes, so the page wouldn't flash.

However, for something simple like this, c# might be overkill. You could solve this particular problem with simple javascript.

Upvotes: 0

Related Questions