启用“多行文本框”以在asp.net Webforms中的Enter键上汇总表单

Question

I have a multiline textbox with in a asp webforms panel control with a default button to it. I need to submit the form by hitting the Enter (Return) key than going to the next line in textarea. the code is as below:

<asp:Panel ID="pnlChat" runat="server" CssClass="chat-entry" DefaultButton="btnChat">
     <p>Type Your Message and Press Enter</p>
          <asp:TextBox ID="txtChat" runat="server" CssClass="span12" TextMode="MultiLine" Rows="4"></asp:TextBox>
          <asp:Button ID="btnChat" runat="server" Text="Send" CssClass="btn" OnClick="btnChat_Click" />
</asp:Panel>

I tried with the jquery keypress method

  $("#<%= txtChat.ClientID %>").keypress(function (e) {
            if (e.which == 13) {
              //  alert('You pressed enter!');
              return false;
            }
        });

But the form is not getting submitted by pressing the enter (return) key. Suggestions/solutions are most welcome.

btw: the panel is inside an updatepanel.

Answer 1

You can have a hidden button outside the UpdatePanel and call that button's click event to submit the form.

In the markup:

...
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" style="display:none" OnClick="btnSubmit_Click" />

In the code:

protected void btnSubmit_Click(object sender, EventArgs e)
{
    //Do whatever you need
}

And in the script:

$(document).ready(function () {
    $("#<%= pnlChat.ClientID %>").on("keypress","#<%= txtChat.ClientID %>", function(e){
        if (e.which == 13) {
            var s = $(this).val();
            $(this).val(s + "\n");
            $("#<%= btnSubmit.ClientID %>").trigger('click');
        }
    });
});

Although I don't understand why you need to post the whole form when you are using UpdatePanel.

Answer 2

if your Multiline textbox is not working then put your buttons from outside of Update panel. its work perfectly for me. i just put my asp buttons outside of update panel. here is code sample when my multiline textbox text not working.

<td style="float: center; padding-left: 155px;">
                                        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                                            <ContentTemplate>
                                                <asp:Button ID="btnPre" OnClientClick="Validate();" ValidationGroup="group1" runat="server"
                                                    CssClass="alt_btn" Text="Preview Your Email" OnClick="btnPre_Click" TabIndex="8" />
                                                <asp:Button ID="Continue" OnClientClick="Validate();" ValidationGroup="group1" runat="server"
                                                    CssClass="alt_btn" Text="Continue" OnClick="Continue_Click" TabIndex="8" />
                                            </ContentTemplate>
                                        </asp:UpdatePanel>
                                    </td>

and when i put my button from out side of update panel then multiline textbox text updating perfectly.

 <td style="float: center; padding-left: 155px;">
                                                <asp:Button ID="btnPre" OnClientClick="Validate();" ValidationGroup="group1" runat="server"
                                                    CssClass="alt_btn" Text="Preview Your Email" OnClick="btnPre_Click" TabIndex="8" />
                                                <asp:Button ID="Continue" OnClientClick="Validate();" ValidationGroup="group1" runat="server"
                                                    CssClass="alt_btn" Text="Continue" OnClick="Continue_Click" TabIndex="8" />
                                    </td>