asp.net - How to use client side script on button click to modify text box -
i'm developing interface using asp.net ajax webforms. shows update panel upon initialization of page , after various actions requested validate user pin number. interface used on tablets, created keypad buttons collect user's pin number looks this:
when buttons clicked run:
protected void btn0_click(object sender, eventargs e) { addnumbertopin("0"); } the procedure call labeled number argument strdigit defined as:
protected void addnumbertopin(string strdigit) { txtpin.text += strdigit; if (txtpin.text.length == 5) { ... ...check database validate pin ... } } this works, slow because every button click creates round trip web server. seems should simple store collected pin in local variable on client , post server once 5 digits have been collected. i'm new web programming, i'm not sure how go doing this.
i've read this , this, still can't figure out how buttons stop posting server. possible?
the asp.net button has onclick property allows set server-side event handler. has onclientclick property can contain client code execute first when button clicked. if client code returns false, postback server canceled.
both properties can set in markup 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 5 digits have been inserted in 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 in <head> section of html document or @ bottom of form.
the event handler in code-behind perform pin validation:
protected void btn_click(object sender, eventargs e) { // check database validate pin string pin = txtpin.text; ... } note: syntax '<%= txtpin.clientid %>' used in javascript code account possible id mangling performed asp.net.
notice have back button in ui. if removes last digit, can process command in client code , return
false prevent postback: <asp:button id="btnback" runat="server" text="back" onclientclick="removelastdigit(); return false;" /> using following function added javascript block:
function removelastdigit() { var txtpin = document.getelementbyid('<%= txtpin.clientid %>'); txtpin.value = txtpin.value.substring(0, txtpin.value.length - 1); }
Comments
Post a Comment