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

Question

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:

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?

score 0 · Answer 1 · answered Jun 10 '16 at 23:43

Here are two things you can do on client side using javascript, which you are doing right now on server side:

Concat a number with a textbox value
Check if textbox length is >= 5. Following script will show you how to do these on client side

<html>
 <head>
  <title> Test </title>
  <script> 
   function AddChar(btn_text){
     
    document.getElementById("txt_my").value = document.getElementById("txt_my").value + btn_text;
    if(document.getElementById("txt_my").value.length>=5){
    alert("Do Youd DB work here");
    }
   }
       </script>
 </head>
 <body>
  <input id ="txt_my" type ="text"  /> <br />
  <input type ="button" value="1" onclick ="AddChar(this.value)"  />
  <input type ="button" value="2" onclick ="AddChar(this.value)"  />
  <input type ="button" value="3" onclick ="AddChar(this.value)" /> <br>
  <input type ="button" value="4" onclick ="AddChar(this.value)" />
  <input type ="button" value="5"  onclick ="AddChar(this.value)" />
  <input type ="button" value="6" onclick ="AddChar(this.value)" /> <br>
  <input type ="button" value="7" onclick ="AddChar(this.value)" />
  <input type ="button" value="8"  onclick ="AddChar(this.value)"/>
  <input type ="button" value="9"  onclick ="AddChar(this.value)"/><br>
  <input type ="button" value="0" onclick ="AddChar(this.value)" />
 </body>
</html>

ConnorsFan · Accepted Answer · 2016-06-13T16:00:01.387

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);
}

This was perfect to get me on the right track! Thanks so much! I wasn't sure where to put the script so I added a line to your answer. Probably obvious to most... but for the benefit of the newbies like me. :) — Brian Pressler, Jun 13 '16 at 15:33
In fact, the script block is often put at the bottom of the form (see http://stackoverflow.com/questions/2451417/whats-pros-and-cons-putting-javascript-in-head-and-putting-just-before-the-body). In your case, it should work in both places. The advantage of putting it at the bottom is that some code involving the HTML elements can be executed immediatly, which does not work if the code is in the `head` section (because the elements are not loaded yet). — ConnorsFan, Jun 13 '16 at 15:48

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

2 Answers2