Simulating the Enter Button for Form Submission Under NS and IE

This article deals with a controlling key strokes under Netscape and IE. This occurred while we were working on a project using ATG. We were trying to trap certain events when hitting specific keys, i.e. we wanted to trigger certain events. In the following I will highlight who you can trap pressing the Enter key and execute a function.

The key to success here is the use of the onkeypress property in your form. Now you need to do is associate a function with this property. This function will look at which has been hit and if it was the Enter key, it’ll do something. So now let’s take a quick look at the script:

function screenkey(e) {
   var whichCode;
   whichCode = (window.Event) ? e.which : e.keyCode;
   if ( whichCode == “13” ) {
      abort_submit = true;
      whichCode = null;
   }
}

OK here with a function screenkey, that sets a variable. The whichCode will actually store which key has been pressed (and that for both browsers). Next we set a condition that checks whether key code “13” has been pressed. The “13” corresponds to the Enter key. If this condition is true we set abort_submit to true and reset whichCode to null. To test if it works try inserting an alert after the if statement. Does it work?

So what can you do with this? Well we wrote a small script that validates the content of the fields you are submitting. Look at the following script:

function validate() {
   if (document.<your form name>.<field you are verifying>.value == “”) {
      alert(‘You have not specified an email address to log in. Please do so now.’);
      abort_submit = false;
      return false;
   }
}

This function will check that a value has been submitted for a specific field. This is done in the conditional statement where we check the current document (document.) and it’s form (<your form name>.) with a certain element (<field you are verifying>.) has a certain value, in this case null. If this condition is true, pop up an alert informing the user that the has to complete this field and stop submitting the form. This function has to reside within the first function after the if statement, like such:

Finally we added a third function (called promptme()) that set the focus of the form field to be completed when the page was loaded (since this was an email address based login we only had one field to contend with). So here goes the last function:

var str=”“;
function promptme() {
   if ( str != “” ) alert(str);
   if (document.<your form name>)
   document.<your form name>.<field you are verifying>.focus();
}

Now all we need to do is tie all this together in our web page:

<html>
<head><title>JavaScript: Simulating the enter button for form submission under Netscape</title>
</head>
<script language=”JavaScript”>
<Aforementioned scripts go here>
</script>
<body onload=”promptme();”>
<form name=”your form name” method=”post” onsubmit=”return validate()”>
Whatever <input type=”text” size=”25” name=”your field name” onkeypress=”screenkey(event);”>
<input type=”image” src=”yourbutton.jpg” align=”absmiddle” alt=”Login” border=”0”>
</form>
</body>
</html>

Right there you go. Now you can execute a specific event based on a key stroke. Hope you found this useful.

Greg's Blog

helping me remember what I figure out

Simulating the Enter Button for Form Submission Under NS and IE