Textchange event not working

Question

I am doing a preview of what I am currently typing in a web page using ASP.NET. What I am trying to achieve is that whenever I type or change text in the textbox, the <h3> or label element will also change and always copy what the textbox value is without refreshing the browser. Unfortunately I cannot make it work. Here is what I tried.

.ASPX

    <div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
    <div class="Padding10px">
        <h1 class="Margin0px">Preview</h1>
        <hr />
        <p></p>
        <h3 id="NewsTitlePreview" class="TextAlignCenter" runat="server">Title</h3>
        <h5 id="NewsContentPreview" class="TextIndent50px TextAlignJustify" runat="server">Content</h5>
    </div>
</div>

<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
    Title
    <asp:TextBox ID="Titletxt" runat="server" OnTextChanged="Titletxt_TextChanged"></asp:TextBox>
    Content
    <asp:TextBox ID="Contenttxt" runat="server" onchange="Contenttxt_TextChanged"></asp:TextBox>
    <asp:Button ID="Submit" runat="server" Text="Submit" />
</div>

.CS

protected void Titletxt_TextChanged(object sender, EventArgs e)
{
    NewsTitlePreview.InnerText = Titletxt.Text;
}
protected void Contenttxt_TextChanged(object sender, EventArgs e)
{
    NewsContentPreview.InnerText = Contenttxt.Text;
}

I Tried Adding Autopostback = true... but it only works and refreshes the page and i need to press tab or enter or leave the textbox :(

UPDATE: I Tried This - enter link description here But Still Doesnt Work :(

Do the _TextChanged events fire at all? If you put a breakpoint in them, does it reach the code when you change the text? — Marleen Schilt, Aug 18 '15 at 08:02
Have you tried javascript? It's so much easier to implement these type of functionality on client side. — Helio, Aug 18 '15 at 08:02
actually it fires when i put autopostback = "true" and when i refresh... what i'am trying to achieve is for it to work without leaving the textbox and not refreshing :( — Alpha Gabriel V. Timbol, Aug 18 '15 at 08:03
Add ScriptManager Control and use label inside an update panel. Don't forget AutoPostBack property. — Helio, Aug 18 '15 at 08:04
how exactly do i make the scriptmanager work? i added script manager then update panel.. i placed the textboxes in the content template... but still no progress — Alpha Gabriel V. Timbol, Aug 18 '15 at 08:12

score 1 · Answer 1 · answered Aug 18 '15 at 08:04

1

You are right in your analysis of the behavior of the control (it only fires the event when you leave the control), even when you have AutoPostBack="True".

MSDN says it all:

The TextBox Web server control does not raise an event each time the user enters a keystroke, only when the user leaves the control. You can have the TextBox control raise client-side events that you handle in client script, which can be useful for responding to individual keystrokes.

So you either have to be satisfied with the current behavior, or set up some client side event handling to do some validation, etc. client side.

answered Aug 18 '15 at 08:04

Patrick Hofman

153,850
22
249
325

thanks for the insight :) iam currently trying to implement update panel to make it work... but im still having no luck in making it work xD – Alpha Gabriel V. Timbol Aug 18 '15 at 08:12
I don't think that is going to work. The event is still raised after leaving the control. – Patrick Hofman Aug 18 '15 at 08:13
yeah :( do you have any idea on how to make it work? – Alpha Gabriel V. Timbol Aug 18 '15 at 08:43
Yes, use [`onchange` or `onkeydown`](http://stackoverflow.com/q/574941/993547) in javascript. – Patrick Hofman Aug 18 '15 at 08:43
just edited my post :( i tried the "Dynamically updating label text on textbox changes?" that is exactly what i plan to achieve but doesnt work :( – Alpha Gabriel V. Timbol Aug 18 '15 at 08:45
it's really nice :) thats kinda what i need.. but i outputs/copies the textbox into the label character by character.. how do i do that without jquery? plain javascript or some asp.net tricks? – Alpha Gabriel V. Timbol Aug 18 '15 at 08:55
Why not use jQuery? It is quite easy to use and will probably help you out on other occasions. Even ASP.NET uses it nowadays. – Patrick Hofman Aug 18 '15 at 08:56

Anoop B.K · Accepted Answer · 2015-08-18T09:16:39.797

1

Just add this script function in your code and in body write onload and call that function.

Javascript:

<script type="text/javascript">
function startProgram() {
       setTimeout('errorcheck()', 2000);

    }

    function errorcheck() {
        setTimeout('errorcheck()', 2000);
        document.getElementById("NewsTitlePreview").innerText = document.getElementById("Titletxt").value
        document.getElementById("NewsContentPreview").innerText = document.getElementById("Contenttxt").value
    }
</script>


<body onload="startProgram();">
<form id="form1" runat="server">

  <div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
 <div class="Padding10px">
<h1 class="Margin0px">Preview</h1>
<hr />
<p></p>
<h3 id="NewsTitlePreview" class="TextAlignCenter" runat="server">Title</h3>
<h5 id="NewsContentPreview" class="TextIndent50px TextAlignJustify" runat="server">Content</h5>
</div>
</div>

<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
Title
<asp:TextBox ID="Titletxt" runat="server" ></asp:TextBox>
Content
<asp:TextBox ID="Contenttxt" runat="server"></asp:TextBox>
<asp:Button ID="Submit" runat="server" Text="Submit"  />
</div>

</form>
</body>

edited Aug 18 '15 at 09:16

answered Aug 18 '15 at 08:52

Anoop B.K

1,484
2
17
31

i will try :) please wait :) im excited for this to work :) – Alpha Gabriel V. Timbol Aug 18 '15 at 08:56
it only works when i leave the textbox... i need it to work without leaving textbox... or on every keypress – Alpha Gabriel V. Timbol Aug 18 '15 at 09:00
It works :) If you want text come faster when you enter a character, change that 2000 to 1000 :) – Anoop B.K Aug 18 '15 at 09:01
i tried :( it doesnt work :( i dont need to leave the textbox.. the code you gave me only works when i leave the textbox – Alpha Gabriel V. Timbol Aug 18 '15 at 09:03
did to add this. – Anoop B.K Aug 18 '15 at 09:07
i did.. PS: this is a content page.. so the is on the masterpage and also the JS – Alpha Gabriel V. Timbol Aug 18 '15 at 09:09
I didn write not even a single line in .cs page. – Anoop B.K Aug 18 '15 at 09:12
then why didnt you remove the ontextchange codes :( – Alpha Gabriel V. Timbol Aug 18 '15 at 09:13
and the autopostback also.. :( – Alpha Gabriel V. Timbol Aug 18 '15 at 09:14
FINALLY IT WORKED!!! i found the PROBLEM!!! i needed to add "ContentPlaceHolder1_" on the ID's in the javascript -_- since they are in content page of masterpage :) – Alpha Gabriel V. Timbol Aug 18 '15 at 09:17
thanks :) but i got one last problem with this code... well when i reach the last part of the content.. it doesnt WRAP :( i just goes on and on to the RIGHT of page :( how do i fix that? thats the last obstacle till this one is complete – Alpha Gabriel V. Timbol Aug 18 '15 at 09:20
okey bro :) i fixed the problem with text wrap :) a little css trick :) thanks :) its now complete :) i love you guys!!! Thanks To ALL THAT HELPED! – Alpha Gabriel V. Timbol Aug 18 '15 at 09:23
if you have used css page write overflow :hidden – Anoop B.K Aug 18 '15 at 09:23

score 1 · Answer 3 · answered Aug 18 '15 at 09:32

Download and include JQuery library. And also modify title and content textbox so they don't change their Id's

Title <asp:TextBox ID="Titletxt" ClientIDMode="Static" runat="server"></asp:TextBox>

Content <asp:TextBox ID="Contenttxt" ClientIDMode="Static" runat="server"></asp:TextBox>

Then add this script and it will work.

<script>    

    $(document).ready(function () {

        $('#Titletxt').on('input', function () {
            $("#NewsTitlePreview").text($(this).val());

        });
        $("#Contenttxt").on('input',function () {
            $("#NewsContentPreview").text($(this).val());
        });
    });
</script>

Kamran Khan · Answer 4 · 2015-08-18T09:51:09.283

0

Try this it will work this how change event call using jquery dont forget to add google apis

   <script>

    $('#txtbox').change(function() {
        alert("change Event");
    });

</script>

edited Aug 18 '15 at 09:51

answered Aug 18 '15 at 08:02

Kamran Khan

1,042
10
21

i already tried that :( unfortunately it doesnt work the way i need it :( it only works on refresh :( i need it to work everytime i change the text :( for example: when i type a word, it copies the value of the textbox per every letter and one by one – Alpha Gabriel V. Timbol Aug 18 '15 at 08:05
Then try javascript it will work fine...or try keypress event for textbox then it will work fine...selectindex work when you write something and then leave the textbox then it will hit event....java script will do the trick for you – Kamran Khan Aug 18 '15 at 08:07
do you have any suggestions on how to do it with javascript bro? :) i would really appreciate it :) – Alpha Gabriel V. Timbol Aug 18 '15 at 08:20
I have added some code for you may this helps solve your problem – Kamran Khan Aug 18 '15 at 09:52

Anoop B.K · Answer 5 · 2015-08-18T08:20:36.893

One of the best idea... Just change your code to this. it works

ASPX

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"  UpdateMode="Conditional" ViewStateMode="Enabled">
<ContentTemplate>
  <div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
  <div class="Padding10px">
    <h1 class="Margin0px">Preview</h1>
    <hr />
    <p></p>
    <h3 id="NewsTitlePreview" class="TextAlignCenter" runat="server">Title</h3>
    <h5 id="NewsContentPreview" class="TextIndent50px TextAlignJustify" runat="server">Content</h5>
</div>
</div>

<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
Title
<asp:TextBox ID="Titletxt" runat="server" OnTextChanged="Titletxt_TextChanged"></asp:TextBox>
Content
<asp:TextBox ID="Contenttxt" runat="server" onchange="Contenttxt_TextChanged"></asp:TextBox>
<asp:Button ID="Submit" runat="server" Text="Submit" />
</div>

</ContentTemplate>
</asp:UpdatePanel>

.CS

 protected void Titletxt_TextChanged(object sender, EventArgs e)
{
NewsTitlePreview.InnerText = Titletxt.Text;
UpdatePanel1.Update();
}
protected void Contenttxt_TextChanged(object sender, EventArgs e)
{
NewsContentPreview.InnerText = Contenttxt.Text;
UpdatePanel1.Update();
}

i tried it :( doesnt work :( doesnt it need a keypress trigger or something? i only works when i leave the textbox :( i need it to work everytime i enter a character — Alpha Gabriel V. Timbol, Aug 18 '15 at 08:54

Textchange event not working

5 Answers5