Submit Form With Enter Key Using jQuery

By default in most browsers, hitting the Enter key will trigger the browser to follow the the URL or button that currently has tab focus. Sometimes it seems as though the browser does whatever it wants after the user hits Enter because the focus isn’t readily apparent. In an interface with one or more forms, it is preferable to have the Enter key trigger the submission of the form so that the user isn’t forced to use his pointer to click the submit button. It’s also nice to include this feature to avoid data loss when the user inevitably hits Enter and the browser decides to go wherever it feels like it.

In this example, we add code that allows the user to submit a form with the enter key using jQuery.

HTML Form

<div id='form_1'>
  Field 1: <input type='text' name='field_1' id='field_1'>
  <p> </p>
  <button type='button' id='form_1_submit_button'>Submit</button>
</div>

jQuery Code

In the following jQuery code, we have a self-executing anonymous function that binds a click event handler to #form_1_submit_button and an event handler for the Enter keypress inside #form_1. Whether the user specifically clicks the submit button or hits the Enter key anywhere inside the form, the ValidateForm() function is called.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<script language='javascript'>
  //submit form with enter key using jQuery
  $(function() {
    $("#form_1_submit_button").click(function() {
      ValidateForm();
    });
    $("#form_1").keypress(function(e) {
      if(e.which == 13) {
        ValidateForm();
        return false;
      }
    });
  });
</script>

Hide SharePoint Ribbons Using jQuery

Using the jQuery library, the following code may be used to hide SharePoint ribbons from appearing at the top of a SharePoint page. In this example, I am using it to hide the ribbon associated with Quest web parts which are used for generating various charts and graphs. I was not able to find or did not have access to a configurable setting to hide the ribbon, so I had to resort to hiding it programmatically in order to reduce clutter on the screen.

Add a Content Editor Web Part to the page and include the following script in the source (or as a reference to a script file). The setTimeout timer should be modified to meet your individual needs. In this particular instance, there is a slight delay after the page is loaded before the ribbon appears so I set the delay to 100 milliseconds to ensure that hide() was called after the ribbon was displayed.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script language='javascript'>
  $(document).ready(function() {
    setTimeout(function() {
      $('#Ribbon\\.QuestContextualTabGroup').hide();
    }, 100);
  });
</script>

The hardest part is trying to identify the appropriate ID of the element that needs to be hidden especially if the ribbon is generated dynamically as part of a script. I was able to find the ID using the inspect element capability in Firefox, but you may also use the following script to cycle through each of the ribbon tabs to find the one you want to hide.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script language='javascript'>
  $(document).ready(function() {
    setTimeout(function() {
      $("a.ms-cui-tt-a").each(function() {
        var strTabID = $(this).parent().attr("id");
        alert(strTabID);
      });
    }, 5000);
  });
</script>

Load jQuery Once Per Page in SharePoint

If you have several scripts on a SharePoint page that all need to reference the jQuery library file, then you may end up in a situation where the library is loaded multiple times. This will cause a conflict and various execution errors. The following script will load jQuery once per page in SharePoint.

This can be avoided by adding a Content Editor Web Part to the page and including the following script in the source (or as a reference to a script file). Once the page is loaded, the jQuery library file will be available to other scripts loaded on the page and you avoid having conflicts. The other scripts will no longer need to load the jQuery library so remove external file references in those scripts.

In this example, my copy of jQuery is stored in a Document Library labeled “code” which would need to be changed to align with your particular folder structure. I am also loading both the standard jQuery library and the SPServices jQuery library.

<script src="./code/jquery.js"></script>
<script src="./code/jquery.SPServices.js"></script>