Search code examples
asp.netweb-applicationswebformsvisual-studio-2005client-side

How to use client side script on button click to modify text box

I'm developing an interface using ASP.NET with AJAX Webforms. It shows an update panel upon initialization of the page and after various actions are requested to validate the user with a PIN number. The interface will be mostly used on tablets, so I created a keypad with buttons to collect the user's PIN number that looks something like this:

enter image description here

When the buttons are clicked they run:

protected void btn0_Click(object sender, EventArgs e)
{
    AddNumberToPin("0");
}

The procedure they call with their labeled number as the argument strDigit is defined as:

protected void AddNumberToPin(string strDigit)
{

    txtPIN.Text += strDigit;
    if (txtPIN.Text.Length == 5)
    {
        ...
        ...check database to validate the pin
        ...
    }

}

This works, however it is very slow because every button click creates another round trip to the web server. It seems like it should be simple to store the collected PIN in a local variable on the client and then only post to the server once the 5 digits have been collected. I'm new to web programming, so I'm not sure how to go about doing this.

I've read this and this, but I still can't figure out how to get the buttons to stop posting to the server. Is this possible?

Solution

  • The ASP.NET Button has an OnClick property that allows to set the server-side event handler. It also has an OnClientClick property which can contain some client code to execute first when the button is clicked. If that client code returns false, the postback to the server is canceled.

    Both properties can be set in markup for your buttons:

    <asp:TextBox ID="txtPIN" runat="server" />
<asp:Button runat="server" Text="0" OnClientClick="return addDigit(this);" OnClick="btn_Click" />
<asp:Button runat="server" Text="1" OnClientClick="return addDigit(this);" OnClick="btn_Click" />
<asp:Button runat="server" Text="2" OnClientClick="return addDigit(this);" OnClick="btn_Click" />
...

    The Javascript addDigit function should return false if less than 5 digits have been inserted in the TextBox:

    <script type="text/javascript">
    function addDigit(btn) {
        var txtPIN = document.getElementById('<%= txtPIN.ClientID %>');
        txtPIN.value += btn.value;
        return txtPIN.value.length >= 5;
    }
</script>

    That script block can be in the <Head> section of the HTML document or at the bottom of the form.

    The event handler in code-behind would perform the PIN validation:

    protected void btn_Click(object sender, EventArgs e)
{
    // Check database to validate the PIN
    string pin = txtPIN.Text;
    ...
}

    Note: The syntax '<%= txtPIN.ClientID %>' is used in the Javascript code to account for the possible ID mangling performed by ASP.NET.

    I notice that you have a Back button in your UI. If it removes the last digit, you can also process that command in client code and return false to prevent the postback:

    <asp:Button ID="btnBack" runat="server" Text="Back" OnClientClick="removeLastDigit(); return false;" />

    Using the following function added to the Javascript block:

    function removeLastDigit() {
    var txtPIN = document.getElementById('<%= txtPIN.ClientID %>');
    txtPIN.value = txtPIN.value.substring(0, txtPIN.value.length - 1);
}