An array of C#, PHP, and HTML programming articles, tutorials, and resources

Posts Tagged ‘ form ’

Submit Form On Enter Key Solution

by Victor | April 16, 2008 in C#, Javascript | 3 Comments

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#

by Victor | April 1, 2008 in C# | 2 Comments

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.