locked
Force autopostback before button click event RRS feed

  • Question

  • User876561910 posted

    Hi

     

    Let’s say I have a form with a textbox (My2ndTextbox) and this has an AutoPostBack set to True.

    This will work fine IF the user clicks off the text box before they click the button (MyButton).

    But if they add data to the text box and then simply click the button, the button (postbackurl) event is fired before the textbox’s autopostback.

     

    Is there a way to force the text box's autopostback before the button’s click event or maybe incorporate the postback within click event

     

    Something like this


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title></title>
    </head>
    
    <body>
    
    <form id="MyForm" runat="server">
    	<asp:TextBox id="My1stTextBox" runat="server"></asp:TextBox>
    	<br />
    	<asp:TextBox id="My2ndTextBox" runat="server" AutoPostBack="true"></asp:TextBox>
    	<br />
    	<asp:Button id="MyButton" runat="server" PostBackUrl="MyNextForm.aspx" OnClientClick="DoSomething()" Text="Button">
    	</asp:Button>
    </form>
    
    </body>
    
    </html>
    



    Sunday, November 25, 2018 7:46 AM

Answers

  • User-2054057000 posted

    This is the JavaScript code for it:

    <asp:TextBox ID="My2ndTextBox" runat="server" onkeyup="clickTheButton()" CssClass="targetTB"></asp:TextBox>
    <br />
    <asp:Button ID="MyButton" runat="server" PostBackUrl="MyNextForm.aspx" Text="Button" OnClick="MyButton_Click"></asp:Button>
    <br />
    <asp:Button ID="myButton2" runat="server" Text="Button2" OnClick="myButton2_Click" CssClass="targetB" style="display:none"/>
    
    <script>
        function clickTheButton(){
            document.getElementById("<%=myButton2.ClientID%>").click();
        }
    </script>
    

    The .aspx.cs events for the 2 buttons:

     protected void MyButton_Click(object sender, EventArgs e)
     {
    
     }
    
     protected void myButton2_Click(object sender, EventArgs e)
     {
    
     }
    

    There is also another way to call AJAX and send the textbox's value to a C# function.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, November 25, 2018 12:25 PM

All replies

  • User-2054057000 posted

    In your code this is how you will force textbox postback before button click.

    Here I will use the help of a new button control and on the keyup event of the textbox I will call the .click() event of this new button. These steps are done with jQuery.

    The code in your .aspx page will be:

    (notice the new button whose id is myButton2.

    <asp:TextBox ID="My2ndTextBox" runat="server" CssClass="targetTB"></asp:TextBox>
    <br />
    <asp:Button ID="MyButton" runat="server" PostBackUrl="MyNextForm.aspx" Text="Button" OnClick="MyButton_Click"></asp:Button>
    <br />
    <asp:Button ID="myButton2" runat="server" Text="Button2" OnClick="myButton2_Click" CssClass="targetB" style="display:none"/>
    

    In the .aspx.cs page I added the click event of these 2 button controls:

    protected void MyButton_Click(object sender, EventArgs e)
    {
    
    }
    
    protected void myButton2_Click(object sender, EventArgs e)
    {
    
    }
    

    Now In your .aspx.cs page I add jQuery code which as the keyup event of textbox:

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            $(".targetTB").keyup(function () {
                $(".targetB").click();
            });
        });
    </script>
    

    In that keyevent I am simply calling the .click() event of the button using jQuery.

    After this you will notice that whenever you add any character in the textbox the keyup event gets called, which in turn calls the myButton2_Click on .aspx.cs page.

    Full code on the .aspx page which you have to use is:

     <asp:TextBox ID="My2ndTextBox" runat="server" CssClass="targetTB"></asp:TextBox>
     <br />
     <asp:Button ID="MyButton" runat="server" PostBackUrl="MyNextForm.aspx" Text="Button" OnClick="MyButton_Click"></asp:Button>
     <br />
     <asp:Button ID="myButton2" runat="server" Text="Button2" OnClick="myButton2_Click" CssClass="targetB" style="display:none"/>
    
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script>
         $(function () {
             $(".targetTB").keyup(function () {
                 $(".targetB").click();
             });
         });
     </script>
    

    Sunday, November 25, 2018 9:53 AM
  • User876561910 posted

    I don't have jquery on this site.

    Can this be done in JS

    Sunday, November 25, 2018 11:13 AM
  • User-2054057000 posted

    You only need to apply the jQuery script on your web page, it will automatically download from CDN (i.e internet server) in a flash. You won't notice anything:

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    Sunday, November 25, 2018 11:27 AM
  • User876561910 posted

    I do use jquery on many of my site - but not this one

    Sunday, November 25, 2018 11:30 AM
  • User-2054057000 posted

    This is the JavaScript code for it:

    <asp:TextBox ID="My2ndTextBox" runat="server" onkeyup="clickTheButton()" CssClass="targetTB"></asp:TextBox>
    <br />
    <asp:Button ID="MyButton" runat="server" PostBackUrl="MyNextForm.aspx" Text="Button" OnClick="MyButton_Click"></asp:Button>
    <br />
    <asp:Button ID="myButton2" runat="server" Text="Button2" OnClick="myButton2_Click" CssClass="targetB" style="display:none"/>
    
    <script>
        function clickTheButton(){
            document.getElementById("<%=myButton2.ClientID%>").click();
        }
    </script>
    

    The .aspx.cs events for the 2 buttons:

     protected void MyButton_Click(object sender, EventArgs e)
     {
    
     }
    
     protected void myButton2_Click(object sender, EventArgs e)
     {
    
     }
    

    There is also another way to call AJAX and send the textbox's value to a C# function.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, November 25, 2018 12:25 PM
  • User876561910 posted

    I hadn't thought of using a hidden button.

    Thank you


    This type of thing seems to work

    <script>
    function DoSomething() {
        document.getElementById("<%=myTextbox.ClientID%>").focus();
        document.getElementById("<%=MyButton.ClientID%>").click();
    }</script>
    </head>
    <body>
    
    <form id="MyForm" runat="server">
    	<asp:TextBox id="myTextbox" AutoPostBack="true" runat="server"></asp:TextBox>
    	<asp:Button id="MyButton" runat="server" PostBackUrl="page2.aspx" style="display:none"></asp:Button><br />
    	<asp:Button id="MyButton2" runat="server" OnClientClick="DoSomething()"  Text="click me">
    	</asp:Button>
    </form>
    

    Sunday, November 25, 2018 6:19 PM
  • User-2054057000 posted

    You should also learn AJAX through which you can call C# function located in .aspx.cs page with JavaScript code without page postback. AJAX can simplify lots of things very easily.

    Thank you!

    Monday, November 26, 2018 9:16 AM