We Keep Coding

WebForms Textbox.TextChanged event is firing twice on button click

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.

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.

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.

ImageButton OnClick event not working in asp.net

I have an Imageutton in asp.net. I want when I clicked on it, an event fire (that code of this event is written in c#).
asp code is:
<div align="right">
<table dir="rtl">
<tr>
<td>
<asp:ImageButton ID="imgScoreStar1" runat="server" ImageUrl="~/Images/ScoreStars/Star0_28px.png" OnClick="Star_Onclick" />
</td>
</tr>
</table>
</div>
and behind code is:
protected void Star_Onclick(object sender, ImageClickEventArgs e)
{
//do something
}
but ever fire click event (I tested it by breakpoint).
Another question: When I click on ImageButton, postback happens. how can I avoid this?
Thank.

Few things to check:
1. Check CausesValidation property. Test with making it false.
2. Use Page.RegisterRequiresRaiseEvent(ImageButton)

How to avoid postback.
Add ScriptManager. There must be only one ScriptManager in one page.
(If you are using Master page, add to master page and no need to add anymore in nested content page)
Add UpdatePanel and add your desired content including imagebutton to ContentTemplate of UpdatePanel.

in aspx
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div align="right">
<table dir="rtl">
<tr>
<td>
<asp:ImageButton ID="imgScoreStar1" runat="server" ImageUrl="~/Images/ScoreStars/Star0_28px.png" OnClick="Star_Onclick" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
in cs
protected void Star_Onclick(object sender, ImageClickEventArgs e)
{
//do something
}
i checked its working you need to check property of that button try to add another button and change ID of button that will Ignore the property that are stopping click event

You can surround your Page load sequence like this...
if(!IsPostBack){
//PageLoad code
}
Then write code under the button click event.
The button click event should work
It worked for me!

Visibility issue of textbox when even its not created

I have two textboxes, txtA and txtB, both are never shown on the display simultaneously, and in code behind when i am applying the condition to check the visibility of textbox, its coming to be true when the textbox is don't even created.
ASPX Code:
<%if(CurrentOrderItem.MasterModelName.ToLower().Contains("string1"))
{ %>
<div class="CustomerName clearfix ">
<div class="txtInput width464">
<asp:TextBox ID="txtA" runat="server" MaxLength="12" />
</div>
</div>
<%} %>
<%if (CurrentOrderItem.MasterModelName.ToLower().Contains("string2"))
{ %>
<div class="txtInput width464">
<asp:TextBox ID="txtB" runat="server" MaxLength="20" autocomplete="off"/>
</div>
</div>
<%} %>
And when i check into the codebehind visibility of the not created textbox is shown as true.

Note that, the server side code embedded in the aspx page will be excecuted during the Render phase. Which means all your controls are created and initialized with the values. So in all the events before Render, you get each control available in the codebehind with the data.
http://msdn.microsoft.com/en-us/library/vstudio/0e39s2ck(v=vs.100).aspx
Also as mentioned in the article, it is not good practice to embed server side code in the ASPX page, because it leads to difficult in maintainance and un expected result.
What you can do instead is that, in the code behind, in the page load you can check the values and make your controls visible or hidden

when i am applying the condition to check the visibility of textbox,
its coming to be true when the textbox is don't even created.
TextBox's Visible will always be true. Althought it is not visible in the browser, its information is stored ViewState.
Other thought
Placing the c# code in ASPX page is fragile and hard to maintain.
Instead, you can easily achieve the same result using Panel control which renders as html div tag.
<asp:Panel ID="APanel" runat="server" CssClass="CustomerName clearfix">
<div class="txtInput width464">
<asp:TextBox ID="txtA" runat="server" MaxLength="12" />
</div>
</asp:Panel>
<asp:Panel ID="BPanel" runat="server" CssClass="CustomerName clearfix">
<div class="txtInput width464">
<asp:TextBox ID="txtB" runat="server" MaxLength="20" autocomplete="off"/>
</div>
</asp:Panel>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (CurrentOrderItem.MasterModelName.ToLower().Contains("string1"))
{
APanel.Visible = true;
BPanel.Visible = false;
}
else
{
APanel.Visible = false;
BPanel.Visible = true;
}
}
}
In this approach, you can check Panel's Visible instead of TextBox.

How to implement a click event on textbox in ASP.NET?

In my web application I need a functionality so that when users click on textbox to input values, it should make the button and the other fields visible?
I am using the code provided below but, could not get it working.
C#:
protected void TextBox1_Click(object sender, EventArgs e)
{
ButtonSearch.Visible = true;
}
ASP.NET:
<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" OnClick="TextBox1_Click"></asp:TextBox>
<asp:Button ID="ButtonSearch" runat="server" OnClick="ButtonSearch_Click" Text="Search" Visible="False" />
How to accomplish this?

Set AutoPostback="True". This way the event will be fired server-side, and the button will become visible.
<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" OnClick="TextBox1_Click" AutoPostBack="true"></asp:TextBox>
However, if you only want to toogle visility of a button, you really should considerate javascript. This will save a trip back to the server.
<asp:TextBox onclick="txtBox1_ClientClicked()" ID="TextBox1" runat="server" OnClick="TextBox1_Click"></asp:TextBox>
<asp:Button ID="ButtonSearch" runat="server" OnClick="ButtonSearch_Click" Text="Search" style="display:none;" />
<script type="text/javascript">
function txtBox1_ClientClicked(){
var theButton = document.getElementById('<%=ButtonSearch.ClientID%>');
theButton.style.display = 'block';
}
</script>

You do not need to post back to the server to accomplish your job. You can use client side onFocus event and javascript/jquery, for example.
I know I used an input of type text, and you are using an ASP Control which posts on server, but here is a JSFiddle to get you on the right track: http://jsfiddle.net/Mmjtz/1/

$("<%= ButtonSearch.ClientID %>").click(function(){
$("#TextBox1").show():
});
In this code you need to pass fields ID which you want to visible on the click of button.

Put the textbox inside a div and use the div's onClick event from codebehind. It's not what you asked but it works for me without any errors. Here is a javascript function to implement requested event:
function toggleVisibility()
{
document.getElementById('TextBox1').disabled = true;
/*
...some other code...
*/
}
And of course, you have to define your onclick event at the div definition after implementing this JS function.
<div id="TBdiv" onClick="toggleVisibility()">
<asp:TextBox ID="TextBox1"..../>
</div>
IMPORTANT: Since you now disabled your TextBox from codebehind, you have to enable it in somewhere before you want to use it again. Otherwise you will not see it while the page is running.

jQuery is the perfect solution for your problem. The code would be something like this:
$("#TextBox1").on("click",function(){$("#ButtonSearch").css("visibility", "visible");})
You include the script by adding <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> to the page and then you can add the piece of code above to within <script></script> tags.

Another modal popup extender question

I am trying to get a modal popup to work, it needs to be triggered in the Code behind.
<asp:Button ID="btnModalPopUp" runat="server" Text="Button" Style="display: none" />
<asp:Panel ID="pnlModalPopup" runat="server" CssClass="modalPopup" Style="display: none"
Width="233px">
<div id="Div1" runat="server" cssclass="title">
Modal text here.
<asp:TextBox ID="txtEditComments" runat="server"></asp:TextBox>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="modalMessage" runat="server" TargetControlID="btnModalPopUp"
PopupControlID="pnlModalPopup" BackgroundCssClass="modalBackground" DropShadow="true"/>
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
modalMessage.Show();
}
Even though it hits the "modalMessage.Show();" code it doesn't show the modal panel.

Two solutions:
The first solution:
Remove Style="display:none" from the pnlModalPopup.
The first solution is will cause the popup to "flash" on the screen when the page first loads, and then quickly disappear.
The second solution:
protected void Page_Load(object sender, EventArgs e)
{
pnlModalPopup.Style["display"] = "block";
modalMessage.Show();
}
Recommendation:
I would recommend using the second solution, that way the modal popup doesn't flicker and then disappear.
Edit: I just tested your code:
I just tested your code in a simple page that contained only the code that you provided...It worked like expected.
Check the following:
Is your modal popup is defined in an UpdatePanel that is conditionally updated?
Check to make sure that the modal popup isn't defined in a Panel that has it's visibility set to false.
If that doesn't work, then check if the modal popup is actually in the source code of the rendered web page.

Listen to Chris's comment as it is needed:
display:none is cosmetically needed,
otherwise the popup will display when
the page is loading, then will quickly
disappear while the ModalPopupExtender
kicks in and hides it.
We had to make ours show like this:
pnlModalPopup.Visible = true;
modalMessage.Show();