Click button when Enter pressed in text field

[dave755]

I have a form in an ASP page that has four SUBMIT buttons, each for a different potential user action. The form also contains a text INPUT field.

For usability reasons, I would like to send a click event to a particular SUBMIT button when the user types into the text field and presses the Enter key.

The way it is now, when the user presses Enter, another one of the SUBMIT buttons gets a click event (not the one I want).

Here is the code in question. I would like the "Go" button to be acted upon, but the "Done" button is currently the one being sent to the processing script. An "onblur" event does not do the trick. It catches when the user tabs out of the text box, but not when they press Enter.

	    <FORM method="POST" action="DoBlueCardAction.Asp" name="cmd">
	      <INPUT type="hidden" name="cns" value="<%=nCNS%>">
	      <TABLE border="0" width="80%" cellspacing="0" cellpadding="0">
	        <TR>
	          <TD align="left">
	            <HR>
    		      <INPUT type="submit" value="Done" name="Done" tabindex="6">
		          <INPUT type="submit" value="Page 2" name="Page2" tabindex="5">
	          </TD>
	          <TD align="center">
	            <HR>
	            <%
	            ' Decide whether to show the Next/Prev buttons
	            SQLCountPrev = "SELECT Count(*) AS c FROM pdoximport.BCImport WHERE CNS_No < " & nCNS
	            SQLCountNext = "SELECT Count(*) AS c FROM pdoximport.BCImport WHERE CNS_No > " & nCNS
	            rs1.Open SQLCountPrev, cn
	              if rs1("c") > 0 then
    		          %><INPUT type="submit" value="<<Prev" name="Prev" tabindex="4"><%
	              end if
	            rs1.Close
	            rs1.Open SQLCountNext, cn
	              if rs1("c") > 0 then
    		          %><INPUT type="submit" value="Next>>" name="Next" tabindex="3"><%
	              end if
	            rs1.Close
	            %>
	          </TD>
	          <TD align="right">
	            <HR>
		          <INPUT type="text" name="NewCNS" value="<%=nCNS%>" size="8" align="right"  tabindex="2">
    		      <INPUT type="submit" value="Go" name="Go" tabindex="1">
	          </TD>
	        </TR>
		    </TABLE>
		  </FORM>

Dave Gee

 

[LFI]

Try adding to the INPUT/TEXT-in-question:

ONKEYDOWN="return go()"

...and the JavaScript function to the SCRIPT section:

function go()
{
 if(event.keyCode == 13) //enter key
 {
  setTimeout("document.cmd.Go.click();",100);
  return false;
 }
 else
  return true;
}

I think this will kill the auto-form submission and then trigger the Go-button to click.

Returning false basically means that the key that was pressed is ignored. You return true for other-than-enter-key (when keyCode is not 13) so that characters entered are displayed in the text field.

Try it out and let us know.

--Dave

 

[dave755]

Thanks Dave,

I got it to work, but not exactly the way you described.

Two issues:
1) Returning 'false' did not seem to cause the keypress to be ignored. I ended up having to force the page transition as you see in the code below.

2) The event object returned a 'not defined' error when I referenced it in the function. I had to reference it in the call.

Here is the code for the function:

<SCRIPT lang="javascript">
function go(k, nCNS)
{
 if(k == 13) //enter key
 {
  var sCNS;
  sCNS = nCNS.toString();
  var sLoc;
  sLoc = "window.location='DoBlueCardAction.Asp?Cmd=Go&cns="+sCNS+"'"
  setTimeout(sLoc,100);
  return false;
 }
 else
  return true;
}
</SCRIPT>

And here is the HTML that calls the function:

<INPUT 
  type="text" 
  name="NewCNS" 
  value="<%=nCNS%>" 
  size="8" 
  align="right"  
  tabindex="2" 
  onkeydown="javascript:return go(event.which, 
    document.forms['cmd'].elements['NewCNS'].value)"
>

Dave Gee

 

[LFI]

Ah, I think you're using Netscape, yes? I was using IE. IE accepts 'keyCode.' Netscape uses 'which.'

Somebody ought to create a standard.

--Dave

 

[dave755]

Good catch. I got so excited that it was working that I forgot to check it against my backup browser.

I am actually using Firefox.

Dave Gee