[Question] Submit on Enter - AJAX

azzeretti · 30-06-2011 2:21pm #1

Does anyone know how to make a form submit on pressing the Enter key when using AJAX? At the moment everything is working fine when the submit button is clicked. Pressing enter just seems to refresh the page and clears the input box?

Here is the input code:

<input type="button" value="Log In" onclick='JavaScript:xmlhttpPost("login.pl")' />

Any ideas?

Freddio · 30-06-2011 2:29pm

You could put in an onkeyup="" event with a function inside it to test for the enter key and if so submit

stevenmu · 30-06-2011 4:11pm

Doesn't pressing the enter key in an input field fire it's onblur and onchange (if there's a change) events?

azzeretti · 30-06-2011 4:17pm

stevenmu wrote: »

Doesn't pressing the enter key in an input field fire it's onblur and onchange (if there's a change) events?

Nope, AJAX is slightly different, it seems to clear the input box.

I got a work around, I changed the input type to an image and add the 'return false' as below. It works now

<input type="image" onclick='JavaScript:xmlhttpPost("login.pl");return false;' src="login.gif"/>

Spunog UIE · 30-06-2011 6:37pm

You could use the onsubmit event on the form and just use the submit button as normal.

Liam Byrne · 30-06-2011 7:39pm

azzeretti wrote: »

Nope, AJAX is slightly different, it seems to clear the input box.

That has nothing to do with AJAX; basically you have a submit button that is being triggered when you hit Enter, reloading the page.

Remove the Submit button from the form.

azzeretti · 30-06-2011 9:35pm

Liam Byrne wrote: »

That has nothing to do with AJAX; basically you have a submit button that is being triggered when you hit Enter, reloading the page.

Remove the Submit button from the form.

I don't understand this to be honest. The submit button was working fine. The trouble was the enter key wasn't triggering the javascript event to pass to the AJAX cascading function. Instead it was triggering a standard submit function, which would clear the form. Seems to be it has everything to do with AJAX.

Just to be clear - I am a newbie in development so the fact that I don't understand it most likely means I am wrong!

azzeretti · 30-06-2011 9:37pm

Spunog UIE wrote: »

You could use the onsubmit event on the form and just use the submit button as normal.

The submit button works fine! Its the ENTER key that didn't post!

Liam Byrne · 30-06-2011 9:49pm

azzeretti wrote: »

I don't understand this to be honest. The submit button was working fine. The trouble was the enter key wasn't triggering the javascript event to pass to the AJAX cascading function. Instead it was triggering a standard submit function, which would clear the form. Seems to be it has everything to do with AJAX.

If you remove the AJAX function then the form would submit anyway as soon as you hit Enter.

Some browsers do that. In actual fact, if there is only 1 input field it's what a browser is MEANT to do.

http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2

http://www.webcheatsheet.com/javascript/disable_enter_key.php

So as I said, it has NOTHING to do with AJAX. You actually need to override the standard browser behaviour for forms, which you can do by having no submit button, like I said.

Spunog UIE · 30-06-2011 10:06pm

azzeretti wrote: »

The submit button works fine! Its the ENTER key that didn't post!

I think you need to provide more code for people to help you. THe fact that the page resets means that the default form action isn't being stopped.

<html>
<head></head>
<body>
<form action="superProcessingPage.html" onsubmit="alert('ajax superprocessing page');return false">
	<input />
	<button type="submit">Submit</button>
</form>
</body>
</html>

Liam Byrne · 01-07-2011 12:10am

azzeretti wrote: »

Instead it was triggering a standard submit function, which would clear the form. Seems to be it has everything to do with AJAX.

Actually, on reading this again, I'd hazard a guess that the JavaScript function is triggering a JavaScript error and not being called, therefore your "return false" is never reached.

So - again - it has nothing to do with AJAX - just an on-page JavaScript error.

Razzuh · 01-07-2011 4:28am

I think the problem here has already been pointed out above. You are using onclick event when you should be using the onsubmit event. onsubmit should fire whether you click on the button or hit enter. You have probably set the form action as the page itself so that's why when you hit enter the form is cleared: the page has just refreshed essentially without handling the posted data.

You should get rid of the onclick in the button and put

onsubmit='JavaScript:xmlhttpPost("login.pl")'

inside the form opening tag instead, like in the example above. That's the correct way for what you're trying to do I think and it should solve your problem.

Giblet · 01-07-2011 11:25am

Don't use javascript: when assigning events.
try binding the event from a separate script call and calling a function directly.

also, are you using asp.net?

Because the first button on an asp page will always submit before any other button due to it's <form> wrapper nature.

[Question] Submit on Enter - AJAX

Comments