locked
Can't change multiline textbox rows using javascript RRS feed

  • Question

  • User1283837345 posted

    I'm trying to change a textbox's rows property using javascript, and the change doesn't "stick".  When I click the "+" button, the textbox displays very briefly with 10 rows, but then reverts to the original size.  (There are not methods in the CodeBehind module)

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="Cert.test" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            function myresize() {
                tt = document.getElementById("mytextbox");
                tt.rows = 10;
            }
        </script>
        <form id="form1" runat="server">
            <div>
                <asp:Button ID="myButton" Text="+" runat="server" OnClientClick="myresize();"/>
                <asp:TextBox ID="mytextbox" runat="server" text="Starting Text" TextMode="MultiLine"  />
            </div>
        </form>
    </body>
    </html>

    Tuesday, November 8, 2016 2:33 PM

Answers

  • User-474980206 posted
    You button is posting back, thus replacing the JavaScript changes with the server version. Use a button type=button, or cancel the event in the onclick handler,
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 3:20 PM
  • User527778624 posted

    Hi,

    Just try returning false from your onclick event handler:

    <script type="text/javascript">
            function myresize() {
                tt = document.getElementById("mytextbox");
                tt.rows = 10;
               return false;
            }
        </script>

    and then return the function value:

    <asp:Button ID="myButton" Text="+" runat="server" OnClientClick="return myresize();"/>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 5:53 PM
  • User-183374066 posted

    displays very briefly with 10 rows, but then reverts to the original size

    Actually the issue is that page get refreshed due to postback. You have to stop that postback by return false on button click.

    <script type="text/javascript">
            function myresize() {
                tt = document.getElementById("<%=mytextbox.ClientID%>");
                tt.rows = 10;
                return false;
            }
        </script>
        <div>
            <asp:Button ID="myButton" Text="+" runat="server" OnClientClick="return myresize();" />
            <asp:TextBox ID="mytextbox" runat="server" Text="Starting Text" TextMode="MultiLine" />
        </div>

    That is it. I checked the above code and it is working fine.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 9, 2016 1:34 AM

All replies

  • User-474980206 posted
    You button is posting back, thus replacing the JavaScript changes with the server version. Use a button type=button, or cancel the event in the onclick handler,
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 3:20 PM
  • User527778624 posted

    Hi,

    Just try returning false from your onclick event handler:

    <script type="text/javascript">
            function myresize() {
                tt = document.getElementById("mytextbox");
                tt.rows = 10;
               return false;
            }
        </script>

    and then return the function value:

    <asp:Button ID="myButton" Text="+" runat="server" OnClientClick="return myresize();"/>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 8, 2016 5:53 PM
  • User347430248 posted

    Hi Dave,

    use the code mentioned below.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication40.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function myresize() {
                //tt = document.getElementById("mytextbox");
                //tt.rows = "10";
                document.getElementById("mytextbox").style.height = "250px";
                return false;
            }
        </script>
        
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
         <%--<asp:Button ID="myButton" Text="+" runat="server" OnClientClick="myresize();"/>--%>
            <button type="button" onclick="myresize()">Set Row Size</button>
                <asp:TextBox ID="mytextbox" runat="server" text="Starting Text" TextMode="MultiLine"  />
        </div>
        </form>
    </body>
    </html>
    

    Output:

    Regards

    Deepak

    Wednesday, November 9, 2016 12:46 AM
  • User-183374066 posted

    displays very briefly with 10 rows, but then reverts to the original size

    Actually the issue is that page get refreshed due to postback. You have to stop that postback by return false on button click.

    <script type="text/javascript">
            function myresize() {
                tt = document.getElementById("<%=mytextbox.ClientID%>");
                tt.rows = 10;
                return false;
            }
        </script>
        <div>
            <asp:Button ID="myButton" Text="+" runat="server" OnClientClick="return myresize();" />
            <asp:TextBox ID="mytextbox" runat="server" Text="Starting Text" TextMode="MultiLine" />
        </div>

    That is it. I checked the above code and it is working fine.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 9, 2016 1:34 AM
  • User1283837345 posted

    Great! Thanks.

    Wednesday, November 9, 2016 7:06 PM