"Return key" behavior in HTML forms

[slightly]

Hi all

I'm working on a PHP/MySQL asset management system for storing my clients' computer information, and something tricky has come up. I have an HTML form, with fields such as "Client name", "Address" and so on, and the way it currently works is that if you enter part of a client name in the appropriate field, eg "mac", and hit the Find button, a Javascript function does some pseudo-AJAX, talks to a PHP script and returns a list of clients with that substring.

The form does not have a "submit" button, but it does have three buttons which, respectively, "find", "add" and "clear" values, using different Javascript routines. They all work fine.

However, what I want to do is to add "return key" behavior, so that, if you enter the string in the "name" field, and then, instead of going to the Find button, hit "Return", it runs the "find" function as before.

This does not work. I set up an "onKeyPress" event on the "name" field to catch the return key - it does so, but I believe that something else is also catching the return keypress, because even without the added onKeyPress, if I hit "return", the page unexpectedly reloads. Hence, when I set up my function, the existing behavior runs at the same time as my new behavior, and the AJAX fails.

Hope that makes sense. So, my question is, does anyone have experience in reprogramming "return key" behavior in an HTML form, and is there a straightforward solution to my problem?

many thanks!

Matt

 

[epochblue]

Typically, the return key defaults to the first Submit button it finds. If you want 'Find' to be the default behavior, I recommend making it a Submit button and have the form's onsubmit method return false (thus canceling the event).

If you really don't want to go the Submit button route (which is the more accessible route--you really shouldn't be coding a web form that REQUIRES JS to run correctly), then you might try adding a 'default="default"' attribute to the Find button. That might work, but since I typically have a submit button, I can't say for certain.

Edit: Since ALA typically says things much better than I can, I recommend reading this article regarding requiring JavaScript before you continue writing your app.

 

[slightly]

Thanks Epochblue - that solution (turning the button into a Submit) works perfectly!

Interestingly, the way I had it programmed, it was failing in Safari, and working in Firefox. I'm not sure whether that means that Safari or Firefox is the more standards-compliant browser in that regard.

And thanks for the ALA link - very sensible approach, and if this app goes public, definitely worth thinking about. For now, though, this is just something for me to cut my teeth on / get my client information into the database - neither the code nor the pages are particularly pretty...

thanks again!

Matt