CODEWITHSUNDEEP
c#javascriptasp.net.net
Jim
Jim

Reputation: 6881

How to make ASP.NET button call client side javascript and not do postback

I have a web app in ASP.NET with a C# code behind. The main login page is going to have a sort of touchpad type UI where there are buttons for 0-9 to enter a pin #.

So, I'm new to ASP.NET and to JavaScript both. When these numeric buttons are clicked on the UI, nothing needs to be done on the server side - there shouldn't be any postback at all. All that needs be done is append a number to a label's text. I'm trying to figure out how to do that in JavaScript, without the button causing any kind of postback.

To make the example much simpler, let's just say I have a UI with a single label and single button on the screen, and everytime you click this single button, it should append a 1 to the label's text. Here's my .aspx, but when I try to run this, I get a "Object Expected" exception at runtime...

EDIT: I've modified my example to include the suggestions made in answers below, and still am having issues. To reproduce, this .aspx code can be copied into the default.aspx of a new VS Web Application project, and run it and click the 1 button; it should append a 1 to the label's value, but it throws an "Object Expected" exception.

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestJavascript._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <asp:Table ID="baseTable" runat="server" HorizontalAlign="Center">
        <asp:TableRow ID="labelRow" runat="server" HorizontalAlign="Center" Width="100" Height="30">
          <asp:TableCell ID="labelCell" runat="server" HorizontalAlign="Center" Width="100%" Height="100%" BorderStyle="Solid" BorderWidth="1px">
            <asp:Label ID="inputLbl" runat="server"/>
          </asp:TableCell>
        </asp:TableRow>
        <asp:TableRow ID="buttonRow" runat="server" HorizontalAlign="Center">
          <asp:TableCell ID="buttonCell" runat="server" HorizontalAlign="Center">
            <asp:Button ID="btn1" runat="server" Text="1" Height="70px" Width="70px" OnClientClick="btn1Click()"/>
          </asp:TableCell>
        </asp:TableRow>
      </asp:Table>
    </div>
  </form>
  <script type="txt/javascript">
    void btn1Click()
    {
        document.getElementById('<%= inputLbl.ClientID %>').value += "1";
        return false;
    }
  </script>
</body>
</html>

Any help is much appreciated!

Upvotes: 3

Views: 50975

Answers (4)

Sam
Sam

Reputation: 11

there is a typo in your Script tag.. First Line (1)

 <script type="**text**/javascript">
void btn1Click()
{
    document.getElementById('<%= inputLbl.ClientID %>').value += "1";
    return false;
}

Upvotes: 1

Francis P
Francis P

Reputation: 13665

First of all, a variable name should not start with a number, so replace 1Btn with a significative name (btnAppendOne).

  1. Bind the onclick client event to your Button, in your PageLoad method:

    btnAppendOne.Attributes.Add("onclick", "return btnAppendOneClick();");

  2. Use the correct javascript (return false should cancel the postback):

    <script type="text/javascript">
     function btnAppendOneClick()
     {
         var updatedLabel = document.getElementById('<%=inputLbl.ClientID %>');
         updatedLabel.innerHTML = updatedLabel.innerHTML + "1";
         return false;
     }
</script>

Upvotes: 1

Josh Mein
Josh Mein

Reputation: 28665

You can use the OnClientClick attribute for the asp button and add return false; which prevents the postback:

<asp:Button ID="1Btn" runat="server" Text="1" Height="70px" Width="70px" 
    OnClientClick="btn1Click(); return false;" />

Upvotes: 18

Adil
Adil

Reputation: 148180

Use return false; statement, it will stop from postback; If you need postback then return true; from function.

<script type="text/javascript">
void btn1Click()
{
    this.inputLbl.Text += "1";
    return false;
}
</script>

Upvotes: 2

Related Questions