submit form when pressing enter

[amoun]

hi,

i am looking for a possibility to submit a form as soon as the user presses the enter button.
I've read the thread http://www.jboss.com/index.html?module=bb&op=viewtopic&t=125326 but I'm sure there has to be a work around for this.

Currently, I'm developing a chat program, therefore such a function would be really nice.

I'm using a commandlink for submitting via mouse click.

Richfaces version: 3.2.0 SR1

any suggestion will be appreciated!

amoun

[baz]

One solution is to use seam.
Look in Chapter 29.1.1.6. <s:defaultAction> of the Seam documentation:
http://docs.jboss.com/seam/2.0.3.CR1/reference/en-US/html/controls.html#d0e18696

The other will be to search in the seam forum and Jira the postings which lead to the development of this tag. From what i can remember in this posts you will find a link to a generic solution without seam. But unfortunately i do not have this link anymore.

[amoun]

thanks for the recommendations. using seam is not an alternative for me, because i just would use one tag component of this framework. therefore integrating a new technology in my project is an overkill.

regarding the second recommendation, i suppose you meant the following article: http://www.jsftutorials.net/defaultActionTag.html
In this article the author is only mentioning the commandbutton, but not the commandlink. Do you known if this is also working for my issue?

- amoun

[lucab]

i think that if the component has focus you can intercept an onkeypress event and if the key pressed is 'enter' then ajax submit the form. To do this you can call the click() method on an hidden button or link (ok, orrible hack...or not?)

here is a sample:

<!-- some where in the page -->
<a4j:commandButton id="aButton" style="display:none" action="yourAction" ... />

in javascript do something similar (pseudocode):

function someEventListener() {
if (keyPressed is 'ENTER')
$('aButton').click(); // $() prototype
}

[amoun]

here is what i have tried so far:
//somewhere in the page
<a4j:commandLink id="send_link" actionListener="#{UserBean.something}" ...

//in the head of the page
document.onkeypress = isEnterPressed;

//function to be called when a key is pressed
function isEnterPressed(event)
{
if (event.keyCode == 13)
{
document.getElementById('chat:send_link').click();
}
}

Unfortunately, it does not work. the function will be accessed but it won't submit the form. the id "chat:send_link" is also correct.

Any ideas on how to make it work?

- amoun

[lucab]

I'm using the trick i suggested with success. Here is a snippet directly from my code:

<a4j:commandButton type="submit" style="visibility:hidden;" id="${id}-submit-btn" actionListener="#{bean[method]}" >

in javascript:

 $(id+'-search-form:'+id+'-submit-btn').click();

probably this is valid only for buttons?? In effect in my code i use only buttons (probably links do not have something like a click() method)

[amoun]

well, for some reason it does not work. it seems that there is no click event for commandlinks and therefore the mentioned solution won't work for me.

but still there has to be a way of submitting a form in ajax calling form plain javascript?

has anyone maybe a solution which works for me too?

thanks

amoun

[bgregory]

Instead of the click() event can you use submit() on the form?

document.getElementById('<form id>').submit();

[amoun]

doesn't make a difference.

And it also doesn't matter if i'm submit der commandLink or the form itself.

The problem that i see is, every time when somebody clicks on the link some function like:

A4J.AJAX.Submit('j_id_jsp_1256790360_0','chat',event,{'parameters':{'chat:send_link':'chat:send_link'} ,'actionUrl':'/pages/new_chat.page','oncomplete':function(request,event,data){javascript:updateChatWindow()}} );return false;

will be called. Therefore if i want to submit the form in a similar way i have to use the same function. the only question is how to get access or how to get the necessary information to create such a submit.

amoun

[ilya_shaikovsky]

use a4j:jsFunction component

[amoun]

thank you, ilya_shaikovsky. This solution works..

In the head:

document.onkeypress = keyPressed;

function keyPressed(event)
{
 if(event.keyCode == 13)
 {
 submitForm();
 }
}

somewhere between the form tags:

<a4j:jsFunction name="submitForm"
 actionListener="#{Bean.processInput}"
 reRender="something" />

The only thing which borders me is that the whole page rerenders as soon as the buttons gets pressed.

How can i prevent this behaviour?

thanks

amoun

[amoun]

never mind.

found the solution myself.

for preventing the page to be reloaded a false as the return value is needed.

e.g.:

function keyPressed(event)
{
 var e = event || window.event;

 if(e.keyCode == 13)
 {
 submitForm();
 return false;
 }
}

- amoun