creating an autopost back progamatically from button click

Question

here is the issue i'm running into and what i've tried thus far and researching.

i'm creating a webform with mulitple textbox's, check box's, etc....

i've set all the properties to them in the properties to AutoPostBack = true

when testing the program, if you leave the cursor in the textbox after putting in the input and go straight to clicking the button, nothing happens, however once you click again it functions correctly.

so i guess what i'm asking is there anyway to make it a single click in that scenario or is there any code that i can add right when the button clicks to double click itself?

thanks

Answer 1

Ok, so this issue is "simple" as to what is occurring, but not so simple to solve.

The textbox on change event, with auto postback allows the user to enter some age. The user THEN has to tab out of that control (or even hit enter key). At that point, the code behind for the text box changed event runs fine. The WHOPPER issue of course is if the user does NOT tab out of the text box, and THEN clicks the submit (or any button).

What happens?

Text box loses focus, triggers a post back. Well, with a full page life cycle being triggered then ZERO surprise the button we JUST clicked on is NOT going to work! So, then the user has to click again on that button.

So, I can think of several solutions here.

The first idea is human engineering and a UI change. Simply fill out a combo box with the age 1-99 (or whatever range you need). Thus, the user does NOT type anymore for the age, but "selects" the age. The combo box can thus have auto post back, and a on change event. The user will NEVER be able to change the combo box without causing a post-back, and thus the user will NEVER get to the submit button without the combo box code having run.

While dropdown of 100 choices is someone "long" from a list of choices, I still this idea is a rather easy solution.

Second idea?

You could consider a update panel. Thus all of the contrrols that you change in the text box change event would be placed in the update panel, EXCEPT for the final submit button you have.

Here is a proof of concept of this in action:

We will have a text box (textmode=number means ONLY user can enter numbers from keyboard, letters etc. are ignored automatic with this setting). So, if the user enters age 1-10, then we set first check box, and 11-20, we set 2nd check box. Of course with a final submit button, then this would require the 2 mouse clicks and the button would not work the first time. However, by placing the controls (and text box) in a update panel, then when the focus is lost, then the update panel posts back ONLY that part of the web page.

The end result is the button click now works, and does not need to be double clicked to function correctly.

So, here is the markup:

            <h3>Enter some text</h3>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"
                        AutoPostBack="true"
                        OnTextChanged="TextBox1_TextChanged"    
                        TextMode="Number">
                    </asp:TextBox>

                    <asp:CheckBox ID="chk10" runat="server" Text="0-10" />
                    <asp:CheckBox ID="chk20" runat="server" Text="11-20" />

                </ContentTemplate>
            </asp:UpdatePanel>

            <asp:Button ID="cmdDone" runat="server" Text="Submit" CssClass="btn"
                OnClick="cmdDone_Click" />
            <br />
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

Note VERY close. The controls and stuff we want to change for the text box change event goes inside of update panel (everything placed inside the content Template).

Then right after is the final button click and whatever else you want/have.

Code behind:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub cmdDone_Click(sender As Object, e As EventArgs)

        Debug.Print("btn click code")
        Label1.Text = "This is button one click"

    End Sub

    Protected Sub TextBox1_TextChanged(sender As Object, e As EventArgs)

        Debug.Print("run text change")

        Dim intAge As Integer = TextBox1.Text

        Select Case intAge
            Case 1 To 10
                chk10.Checked = True
                chk20.Checked = False
            Case 11 To 20
                chk10.Checked = False
                chk20.Checked = True
        End Select

    End Sub

The result looks like this, and note how I am free to click on the button EVEN WHEN I don't exit or lose focus from the text box.

So, since we used a update panel, then the trigger of the text box causes a post back, but ONLY what is inside of the panel. From the users point of view, they not see a post-back, and your button will now work for BOTH cases (tabbing out of the text box, and button click, or NOT tabbing out, and clicking on the button).

Answer 2

Hi @Joseph Hedbon,

when testing the program, if you leave the cursor in the textbox after putting in the input and go straight to clicking the button, nothing happens, however once you click again it functions correctly.

I think you can trigger the TextChanged event while typing. This avoids the need to click the button twice when AutoPostBack fails to fire because the cursor is accidentally stuck in the text box.

If you want to trigger TextChanged event when you type something then you should call it from javascript using OnKeyDown event.

see below code sample :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script type="text/javascript">
    function TextChanged(control) {
        $(control).change();
    }
  </script>

<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" OnTextChanged="TextBox1_TextChanged"  OnKeyDown="TextChanged(this)"></asp:TextBox>

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.