Posts Tagged ‘form’

Programmatically Submit Form on Enter Key in C#

By default, a majority of the pages and all the functions on a C# Web Application page are all contained within a single form element. Therefore, there may be multiple buttons or other postback controls within a single form. And this may be the reason why there isn’t by default a control which is automatically called when the web users hits the ENTER button.

To Assign a Default On a Standard C# Webpage

This is the default way and involves the name of the control. If you have a ASP Button called btnSearch, the code you would include in the Page_Load function.

this.Form.DefaultButton = “btnSearch”;

To Assign a Default On a Content Page (from a MasterPage) C# Webpage

If your Web application uses MasterPages and you want to assign a control to submit the form on the Enter key, you concept is the same as above, but you’ll need to pass the UniqueId of the control. Assume a control called btnSearch on a ContentPage, add the following to the Page_Load function.

this.Form.DefaultButton = btnSearch.UniqueId;

Some benefits to programmatically assigning the Enter key is your ability to change which Postback function to assign based on how the web user enters the page. Other than that, assigning the default submit control is a major convenience factor for web users.

References:
http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlform.defaultbutton.aspx

Submit Form On Enter Key Solution

It is natural for web users to hit the enter key to submit a form or otherwise activate an action. There have been several cases where the form does not submit on the enter key. The below example works.

<body>
   <form id="form1" runat="server">
      <div>
         <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
         <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
         <asp:Label ID="lblOutput" runat="server" Text=""></asp:Label>
      </div>
   </form>
</body>

The Button1_Click action simply copies the input text from txtFirstName into the label lblOutput. Because this simple example works, one would expect this to work in every case. That is not the case. If hitting the enter key does not submit the form, try one of the following below:

  1. Try putting an invisible HTML Input (Submit) button. Though this has worked for others, it did not work for my situation.
    <input type="text" style="display:none"/>
  2. A second option to try is to use a onKeyDown event. This second option will append a moderately long javascript script to check for the enter key on each button press. If the button is pressed, it activates the form submit. To use this, place this script in the head. Finally, on the last input textbox, use the following:
    onKeyPress="return submitFormWithEnter(this,event)"

    The script is below goes in the within html head tags:

    <script type="text/javascript">
    
    function submitFormWithEnter(myfield,e)
    {
       var keycode;
       if (window.event)
       {
          keycode = window.event.keyCode;
       }
       else if (e)
       {
          keycode = e.which;
       }
       else
       {
          return true;
       }
    
       if (keycode == 13)
       {
          myfield.form.submit();
          return false;
       }
       else
       {
          return true;
       }
    }
    </script>
  3. This last situation, which worked best for me also checks for the enter key using javascript, but instead of simply activating the form’s action, the function to be run is directly specified. Below, EmailTextBox is the last input TextBox element. Next, replace LoginButton with the ASP Submit Buttton. This script needs to go in the Page_Load section of the codebehind.
    EmailTextBox.Attributes.Add("onKeyPress", "javascript:if (event.keyCode == 13) __doPostBack('" + LoginButton.UniqueID + "','')");

- EDIT JULY 16, 2008 -

See Form Submit On Enter in Visual Studio post for both the GUI and programmatic way to submit form using the enter key!

Disable a Button After a Click in C#

Have a form that has multiple repeated submissions? Ever wonder why that happens? The most possible reason for multiple form submissions is a user double clicking a submit button. This results in the form being submitted twice. There have been several ideas in how to prevent this, but the easiest way is to simply add javascript to the onclick action. Doing this in C# is extremely easy. Simply use the following script, where exampleButton is the id of a LinkButton in C#.

exampleButton.Attributes.Add("onclick", "this.disabled=true;");

An explanation to what the Attributes.Add function does is add an attribute to the exampleButton. This attribute is the onclick action. On each click, the javascript function this.disabled=true disables any future clicks.

In javascript, the ‘this‘ keyword refers to the control that called it. In this case, ‘this‘ refers to the exampleButton. Therefore, this javascript code snippet sets the disabled attribute to true, instantly disabling future button clicks.