CODEWITHSUNDEEP
jqueryasp.netwebforms
Kurkula
Kurkula

Reputation: 6762

Displaying Texbox value using Jquery

I have a Asp.Net Webform with a textbox. I am trying to display the value of textbox server control value in a text area embedded with some text on button click. I am not sure if its a server control run at server issue or post back issue, The value of text box is not populated in text area. Any help would be highly appreciated. Thanks in advance.

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#Button2').click(function () {
                $('#test').show();
                return false;
            });
        });

    </script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button2" runat="server" Text="Go" />



        <span id="test" style="display: none">
            <textarea id="showTextarea">
    This is new <%=TextBox1.Text %> from web form server control.
    </textarea>
        </span>
    </div>
    </form>
</body>
</html>

Upvotes: 1

Views: 1061

Answers (3)

MatteKarla
MatteKarla

Reputation: 2737

It isn't a postback issue. jQuery/javascript handles the click and when it returns false it means don't post back.

Client side

If you would like to display the value from the textbox without doing anything with it on the server then you should just retrieve the answer and return false (or you can add the event to the function function(e) { and then do a e.preventDefault(); )

  $("#Button2").click(function () {
    $("#showTextarea").val("This is new " + $("#TextBox1").val() + " from web form server control");
    $("#test").show();
    return false;
  });

Server side

If you would like to handle data on the server side you should add a multiline textbox to the aspx-page and setting it to Visible="False" by default:

<asp:TextBox ID="showTextarea" runat="server" TextMode="MultiLine" Visible="False"></asp:TextBox>

And then the following in code behind:

protected void Button2_Click(object sender, EventArgs e)
{
    showTextarea.Visible = true;
    showTextarea.Text = "This is new " + TextBox1.Text + " from web form server control.";
}

Upvotes: 2

Kaushtuv
Kaushtuv

Reputation: 489

    <script type="text/javascript">
    $(document).ready(function () {
        $('#Button2').click(function () {
            $('#showTextarea').val('This is new' + $('#TextBox1').val() + ' from web form server control');
            $('#test').show();
            return false;
        });
    });

</script>

<textarea id="showTextarea">

</textarea>

Upvotes: 1

Shyju
Shyju

Reputation: 218852

Using jQuery,

   $(function() {
        $('#Button2').click(function () {
            $('#showTextarea').val($("#TextBox1").val());
            return false;
        });
    });

This code will work if your TextBox has the ID TextBox1 and your text area has the ID showTextarea and your button has the ID Button2

In ASP.NET webforms, If your controls are in other ASP.NET Controls(like panels etc..), the ids will not be exactly like this. you may need to check the ViewSource to verify that.

Upvotes: 2

Related Questions