Enable ‘Enter’ Key in SkySales Forms

June 5th, 2010

If you’ve developed in SkySales or even .NET Web Forms you probably have noticed the lack of support for traditional ‘enter’ key behavior on forms. This is due to the .NET methodology of hijacking the return key behavior with some javascript events. Since SkySales is based on .NET Web Forms, the problem rears it’s ugly head there as well. And, if it does end up working but you have multiple form inputs and buttons on the page, it may not trigger the right submit button.

Out of the box, SkySales loads up the submit form button with a few actions such as client-side validation in the form of javascript functions like: “validate(this)”. That particular validate method determines which form elements are child members of the control submitting the form and then runs the appropriate validation for each element on the form. We’ll use a similar method for tackling the enter key problem.

For this fix, I’m assuming the use of the jQuery framework (which has officially been shipping with SkySales since the 2.x version). The following **code is how we’ll capture the enter key from the XSLT file:

<script langugage="javascript">
$(function()
{
$("input[@id^='<xsl:value-of  select="/*/@clientID"/>']").keydown( function(event) { checkEnter(event, '<xsl:value-of select="//CONTROLS/LINKBUTTONSUBMIT/*/@id"/>'); });
});
</script>

Notice in the code above that we are just checking for inputs that start with the clientID of the SkySales control we are using.  If your control is inside a control group, this code should be in the control group XSLT so it covers all of the elements inside the group.  If you had some select boxes on your form that you wanted to add enter key support on, you would simply expand the jQuery selector to **include select elements:


$("select[@id^='<xsl:value-of  select="/*/@clientID"/>'], [input[@id^='<xsl:value-of  select="/*/@clientID"/>']")... etc


The checkEnter function will basically create a new function for client script residing in the onClick method for the button id that is passed in, and then fire the href event.  This function should reside in a common javascript file that gets included on every page.  The source can be downloaded here.

I believe this small bit of code can help your SkySales site out by helping it behave the way people expect pages to behave on the web.

** Special note **: The code samples work with earlier versions of jQuery. The current version doesn’t require the @ symbol in front of attribute identifiers so modify your code appropriately.

Filed under New Skies, SkySales