Controlling Enter Key-Triggered Submit Behavior

[evan k. stone]

I'm sure a lot of people have asked this, but here is the problem I'm having, and I'm not sure exactly how to solve it. It's probably something simple that I'm just missing conceptually, but hopefully you guys know the answer...

OK... I have a form, and in the form I have two commandButton components. One is "Back" and has its immediate attribute set to "true". The other button is "Continue", and its action attribute is set to call a method on a bean. Both work great if the user *clicks* on the respective buttons.

However, the problem is that if the user hits the *Enter* key, the form submits (expected), but it behaves as if the "Back" button was clicked. Is there a way to force the submit of a form to always do the same action of the "Continue" button (i.e. call the method on the bean)?


thanks!

///eks

[Ali Gohar]

i think you will have to specify id="submit" for that button

[Anu Pillai]

If you can use JavaScript, then trap the enter key event and submit the form to the action that would be called on clicking the "Continue" button.

[Bauke Scholtz]

Put the submit button in the front of the button group. By default HTML spec always the firstnext button will be used.

[evan k. stone]

Thank you for the suggestions. Unfortunately I can't do Bauke's suggestion since the design is rather specific in its placement of the buttons.

I tried out ali's suggestion, and it seems to not work as expected. I made the continue button's id "submit", but it still triggers the "Back" commandButton.

So it looks like I'm down to trying Anu's suggestion, or some variant of it. Let me know if anyone has any other suggestions.

[EDIT]
Anyone have any good resources (links, etc.) for doing the kind of thing Anu is suggesting? I haven't "taken the plunge" yet with embedding JavaScript into my JSF pages yet (other than what gets automatically generated) - is that a really daunting task or is it fairly straightforward?
[/EDIT]

Thanks again!

///eks
[ December 20, 2006: Message edited by: evan k. stone ]

[Bauke Scholtz]

Try putting the back button in a separate h:form.

[Ali Gohar]

As far as javascript is concerned you can do something like this

<h:commandButton id="back" value="Back" onklick="btnClick(this)"/>
<h:commandButton id="continue" value="Continue" onklick="btnClick(this)"/>

Here i have used "onklick" instead of "onclick" because it is not allowing me to use that one. so just replace it

Now write the javascript function

function btnClicked(control) {
  
  if (control.name == 'back') {
    //Here do what you want to do for Back button
  } 
  else if (control.name == 'continue') {
    //Here do what you want to do for continue button
  } 
}

If you are using the controls inside a <h:form> tag then you will have to append the form id with the control name to form that. For example if your form name is myForm then you will write the if condition in javascript as

if (control.name == "myForm:back")

same for the other control