Introduction

Web technologies sometimes need a little help to be as useful as people think they should be. And I think that bar was set by the Microsoft Office desktop application years ago. Particularly with the advancement of Web technologies over the past 20 years, the line between web and desktop applications is becoming ever more blurred, making it harder for users to discern what is still not natively possible on the Web.

One small way in which desktop and web technologies still differ is in actioning a form. It’s pretty common for a user to submit a form in a desktop app with the strike of an enter key instead of clicking on a Submit button; so users find it irksome when a similar form isn’t submitted with the enter key in a web application.

Inject the Ability to Submit a SmartForm Using the Enter Key

Thankfully, we have some tools we can use to replicate the action in Web applications. Specifically for K2 SmartForms, we can inject this ability directly into forms and views.

We’ll do this by creating a JavaScript and jQuery script Expression, and placing it in a hidden literal on the SmartForm.

What You’ll Need

• Access to the K2 SmartForms Designer in the desired environment and knowledge of K2 SmartForms
• Ability to Check Out and Edit the desired SmartForm
• The name of the button used to submit the form
• Knowledge of JavaScript and jQuery… or at least cutting and pasting.

Create the Literal on the SmartForm

Follow these steps to create the hidden literal control on the SmartForm.

1. Open a browser on your local machine and navigate to the K2 SmartForms Designer for the desired environment. Log in using an account with permission to access the project and its forms.
2. Check out and Edit the SmartForm the code will be injected into.
3. Drag a Data Label from the Controls Pane onto an inconspicuous place on the SmartForm in the Forms Designer.
4. Set some properties for the new Data Label as follows:
   1. Set the Data Type dropdownlist value to Text
   2. Set the Visible checkbox to checked
   3. Set the Enabled checkbox to checked
   4. Set the Literal checkbox to checked
   5. Click on the ellipses button at the right of the Expression dropdownlist control.

Create the Expression

1. In the Select an Expression form (that popped up when you clicked the ellipses), click Add to create a new expression.
2. In the Edit Expression form (that popped up when you clicked the Add button), enter a name for the new expression at the top. Consider using something like “Add jQuery Submit with Enter key for {Form Name}” (where {Form Name} is the name of the form you’re working in). Because expressions can be used on multiple forms within a project, adding the form name to the expression name helps people to know where that code is used.
   
   This could be particularly important in this case if the names of submit buttons differ from form to form.
3. The middle region of the Edit Expression form is for creation of the expression itself. The expression will be a client-side script. Copy the code below onto your clipboard (please excuse the modified script tags):
   
   
*script language='JavaScript'*
  $(document).on("keypress", function (e) {
    if (e.which == 13) {
      $('[name="{button name}"]').focus();
      $('[name="{button name}"]').click();
    }
  });
*/script*

   
   Now let’s talk a little about what the code between the script tags does.
   • The first line of code is jQuery notation for “When the document is in a ready state, when a key is pressed, trigger the following function.”
   • The second line is a control statement that reads, “if the enter key was pressed,”;
   • The third and fourth lines are instructions: the third line reads, “find the control called {button name} and shift the focus to that control; the fourth line reads, “find the control called {button name} and click it.”

4. Paste the code into an editor (Notepad will work just fine) and adjust the code for your specific form. The value {button name} should be the name of the button used to submit the form.
   
   Be especially careful when pasting this code. There’s a lot of meaningful punctuation here. If you think there’s a chance something got messed up, it’s probably better to delete what you’ve pasted and re-paste from the source. A missing bracket or semicolon can mean the difference between something cool and something useless.
5. Once your edits are completed, copy the completed code and paste it into the field in the middle region of the Edit Expression form. Even though only part of the code will appear in the Expression Details pane, the entire expression should appear in the Preview pane at bottom. The line breaks may make the code seem spread out in the Details pane, but it won’t matter.
   
   If you need to make any small changes to the pasted code, you may edit it in the textbox in the Expression Details pane, though you may have to scroll a considerable amount to make your edit.
   
   Once you’re satisfied with the code, click OK in the lower right corner to close the Edit Expression form.
6. Click OK in the lower right corner to close the Select an Expression form.
7. The new expression should appear selected in the Properties pane of the Form Designer. Verify that it does, then click Finish in the lower right corner to close the Form Designer form.
8. Check in the form you’ve just been editing.
9. Run the form or click on the Design Time URL to load the form into the browser. You should be able to type whatever you need to into the input fields and strike the return key to submit the form.

What Have You Done?

Congratulations! You’ve just completed all the steps needed to enable your SmartForm to submit with the strike of the enter key. Here’s what you actually did: You injected some JavaScript/jQuery code that listens for the strike of the enter key, puts the focus on the submit button and then virtually clicks it.
The code, in its current form, depends on specifying the name of the submit button control, so if the name of the button changes, the code will no longer work.

Variations on the Theme

Of course, you can modify the code to better suit your needs. For example, you could add some code in to make it function with the use of the tab key instead of, or in addition to, the enter key. Simply change that second line to read

if (e.which == 13) || (e.which == 9) {

and both the enter key and the tab key should trigger the submit capability.