Donate

JQuery Calculator Example In ASP.NET Web Forms

The image above is a jquery/javascript calculator developed in ASP.NET 4.0 web template. Here's the functions. I'wont be posting all codes since it will took up space in my post. I'll just post the sqrt() and a number scripts. The ASPX markup uses plain css for centering and aligning the buttons and html controls. No asp.net server controls are involved. For the jquery processing, im using the id selector.
  /* show zero to textbox on page load */  
  $("#txtCalc").ready(function () {  
    $("#txtCalc").val("0");  
  });  
  //square root  
        $("#btnSqrt").click(function () {  
          var text = $("#txtCalc").val();  
          //if invalid input,do not execute codes below  
          if (text.search("Invalid") != -1) {  
            return;  
          }  
          if (text.length == 1) {  
            if (text == "0") {  
              return;  
            }  
            else //text is 3  
            {  
              var x = parseFloat($("#txtCalc").val());  
              var str = Math.sqrt(x);  
              $("#txtCalc").val(str);  
              result = str;  
              arrayComputation = "";  
              $("#labelArray").val("");  
            }  
          }  
          else { //length is two  
            if (text.indexOf("-") != -1) {  
              $("#txtCalc").val("Invalid Input");  
              return;  
            }  
            else {  
              var x = parseFloat($("#txtCalc").val());  
              var str = Math.sqrt(x);  
              $("#txtCalc").val(str);  
              result = str;  
              arrayComputation = "";  
              $("#labelArray").val("");  
            }  
          }  
          operatorPressed = "0";  
        });  
         /* NUMBER BUTTONS */  
        $("#btnZero").click(function () {  
          //conditions aron mu reset ang input  
          //if an operator is typed  
          if (operatorPressed == 1) {  
            $("#txtCalc").val("");  
            operatorPressed = 0;  
          }  
          var text = $("#txtCalc").val();  
          //if invalid input,do not execute codes below  
          if (text.search("Invalid") != -1) {  
            return;  
          }  
          if (text.length == 1) {  
            if (text != "0") {  
              var str = $("#txtCalc").val();  
              var newStr = str.concat($("#btnZero").attr("value"));  
              $("#txtCalc").val(newStr);  
            }  
          }  
          else { //length is two  
            var str = $("#txtCalc").val();  
            var newStr = str.concat($("#btnZero").attr("value"));  
            $("#txtCalc").val(newStr);  
          }  
        }); //end click button zero  
Make sure to register your jquery script in your asp.net content/master page.
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">  
 <script type="text/javascript" src="Scripts/jquery-1.4.1.js" language="javascript">  
 </script>  

Comments

Post a Comment

Donate

Popular Posts From This Blog

WPF CRUD Application Using DataGrid, MVVM Pattern, Entity Framework, And C#.NET

TypeScript Error Or Bug: The term 'tsc' is not recognized as the name of a cmdlet, function, script file, or operable program.

Invalid nested tag div found, expected closing tag input