WebForms Textbox.TextChanged event is firing twice on button click

Question

There appears to be a hundred questions that are very similar, but none seem to solve my issue.

I have a very basic bootstrap webform with two textboxes - each accepts a serial number that is populated by a handheld scanner attached to the PC. When the user scans the first barcode, the TextChanged event for txtLabelA fires a method that validates the serial number and switches focus to txtLabelB. When the user scans the second barcode it fires the TextChanged event for txtLabelB. This inserts the two values into a cross reference table in the database, displays a success message and clears the form for the next set of serial numbers. Very straight forward. This has worked flawlessly for a long time.

However, recently I was asked to add a button to the form that allows the user to manually type in a serial number and click Submit. This has now mucked everything up, because clicking the Submit button fires the OnClick AND the OnTextChanged events causing the form to postback twice. How can I prevent this?

<div class="card-body">
            <div class="form-group">                    
                <asp:TextBox ID="txtLabelA" runat="server" EnableViewState="true" CssClass="form-control" AutoPostBack="true" OnTextChanged="txtLabelA_TextChanged"></asp:TextBox>
                <span class="help-block"></span>
            </div>               
            <div class="form-group">
                <asp:TextBox ID="txtLabelB" runat="server" EnableViewState="true" CssClass="form-control" AutoPostBack="true" OnTextChanged="txtLabelB_TextChanged"></asp:TextBox>
                <span class="help-block"></span>
            </div>
            <div class="form-group">
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btn btn-primary" OnClick="btnSubmit_Click" />
                <asp:Button ID="btnCancel" runat="server" Text="Clear" CssClass="btn btn-secondary" OnClick="btnCancel_Click" />
                <div style="margin-top: 10px;">
                    <p>
                        <asp:Label ID="lblError" runat="server" CssClass="text-danger"></asp:Label>
                        <asp:Label ID="lblSuccess" runat="server" CssClass="text-success"></asp:Label>
                    </p>
                </div>
            </div>
        </div>

Here is a snippet of the code behind (not much to it):

 protected void txtLabelA_TextChanged(object sender, EventArgs e)
    {
        GetLabelDetails();
    }
 protected void txtLabelB_TextChanged(object sender, EventArgs e)
    {
        SyncLabels();
    }

 protected void btnSubmit_Click(object sender, EventArgs e)
    {
        SyncLabels();
    }

I have even tried changing the button's OnClick event to be the OnTextChanged event, but it didn't help.

Does anyone have any thoughts?

Thanks.

Answer 1

https://learn.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.textbox.autopostback?view=netframework-4.8

Use the AutoPostBack property to specify whether an automatic postback to the server will occur when the TextBox control loses focus. Pressing the ENTER or the TAB key while in the TextBox control is the most common way to change focus.

In my personal experience, barcode scanners essentially mimic a user typing in a barcode number and then pressing ENTER. If a user manually types in a barcode number and then clicks on the Submit button, then the TextBox is losing focus anyway and causing the additional Postback.

Recommendation: Remove the Button.Click event (or at least the logic within the Click handler.)

Note: If the TextBox control's parent container contains a button marked as the default button (for example, if the container's DefaultButton or DefaultButton property is set), the default button's Click event is not raised in response to the automatic postback.

Answer 2

Ok folks, we found a solution. I merged the suggestions of both posters above to find a resolution. I started with Daniel's suggestion to put nothing in the button's click event to ensure it would not trigger the SyncLabels() method, but that alone did not completely solve it because the event itself was still causing a postback. The trick was including Bmils' note above to add a meaningless javascript function to the OnClientCLick() event of the button. This allowed me to "return: false;", effectively blocking the second postback on the client side. Thank you both for your input. I wouldn't have resolved this with your help.