Using enter key to submit AJAX Query

[ner0]

Hi all,

busy day for me on here!.. here\'s another problem I had today:
Have coded a pretty nice AJAX enabled form, which basically takes a value entered into a text field, queries a mySQL database, and returns a bunch of data regarding whatever text is entered.

All was fine and dandy up until this point, it was simple enough to shove an \'onclick\' onto a form button (<input type=\"button\" onclick=\"blahblahblah\".... />)

Though what if (and I almost always do this) my user decides to use the enter/return key to submit the form?

The code then decided to use the normal form.submit action, and kept throwing me back to my index page, obviously not as I\'d have hoped.

So I knew I had to somehow override the enter key\'s functionality for this form, but how? Well here goes.

Every time someone presses a key while focussed on the text field, I\'d run a command and check whether that key was \'return\'.. if it was, I\'d execute the relevant AJAX function, halt the default form action, and be done! otherwise I\'d just let the character appear, so my script would be completely transparent.

Here\'s the code for the input field (HTML):

Code: Select all

<input onkeydown=&#092;"return entSub&#40;event,this.form,\'{$nav->script}/e/userCheck\'&#41;;&#092;" type=&#092;"text&#092;" name=&#092;"text&#092;" />

the \'{$nav->script}/e/userCheck\' parameter of the function is the parameter I need to pass to my AJAX function, obviously yours will differ to this.

Now for the j&#097;v&#097;script \'entSub\' code...

Code: Select all

function entSub(event,formName,xmlPostParam) {
// Enter funcion with event (i.e. what happened to make this function execute).. the form\'s name.. and whatever we\'re passing to xmlhttpPost //
	if (event && event.which == 13)
// if event exists, and is 13 (enter key being pressed)...
	{
// call xmlHttpPost using the parameter submitted...
		xmlhttpPost(xmlPostParam);
// and DON\'T submit the form using normal methods
		return false;
	}
// if our event is -not- the enter key being pressed..
	else
	{
// display the character entered in the text field..
		return true;
	}
}

As always, probably more elegant ways of accomplishing this, but this code suited my application the most...
enjoy!