6

I created a wizard on VF page. Each step of the wizard has "back" and "next" buttons except for the first step which has only "next" button.

When I was on the first step's page and pressed the enter key, I was brought to the second page.

When I was on the second step's page and pressed the enter key. the "back" button's function was triggered and then I was brought back to the first step's page.

This is my code

The first page's button:

<apex:pageBlock mode="edit">
<apex:pageBlockButtons >
    <apex:commandButton action="{!page2}" value="next"/>
</apex:pageBlockButtons>
....
</apex:pageBlock>

The second page's buttons:

<apex:pageBlock mode="edit">
<apex:pageBlockButtons >
    <apex:commandButton action="{!page1}" value="back"/>
    <apex:commandButton action="{!page3}" value="next"/>
</apex:pageBlockButtons>
....
</apex:pageBlock>

My questions are

  1. Has VF page a default button always automatically set up to be the first command button on page?

  2. How can I set up the default button on VF page when I press on the enter key? Can I use commandbutton's attribute "accesskey"?

  3. Or no default command button at all. How can I prevent the back button to be triggered after I pressed the enter key?

Any advices would be appreciated.

2
  • 1
    try reversing the order of the command buttons in your code on the 2nd page.
    – crmprogdev
    Jun 30, 2014 at 3:21
  • @crmprogdev Thank you so much. I tried your advice and it worked. But I'd rather not change the design of the VF page.
    – lw29
    Jun 30, 2014 at 6:37

2 Answers 2

3

Visualforce does not allow you to change the default command button. It would in fact be difficult, because the default behavior comes from the browser. In most browsers, if enter is pressed while in an input field, the first input type="submit" element is selected. The problem is that Visualforce renders all commandButtons with type="submit".

Knowing this, we can get the browser to give us the desired behavior by adding an extra, non-visible commandButton as the first commandButton on the page, like so:

<apex:pageBlock mode="edit">
  <apex:pageBlockButtons >
    <apex:commandButton action="{!page3}" style="display:hidden !important" />
    <apex:commandButton action="{!page1}" value="back"/>
    <apex:commandButton action="{!page3}" value="next"/>
  </apex:pageBlockButtons>
  ....
</apex:pageBlock>

Note that I'm using css to hide the extra button, and not Visualforce's rendered attribute; when rendered is false, the VF component isn't even output as HTML to the browser. Instead of an inline style attribute, you could also use a style class; this is what I do:

<style>
  .defaultButton {
    display:none !important;
  }
</style>
<apex:pageBlock mode="edit">
  <apex:pageBlockButtons >
    <apex:commandButton action="{!page3}" styleClass='defaultButton' />
// etc
1
  • Thank you for the answer. I will accept this answer because it's a really good solution. This question have been asked for over a year and my project with SF ended a year ago. I ended up switching the order of the buttons though...
    – lw29
    Dec 21, 2015 at 8:49
0

A VF page will default to using the first button specified in your code. To change this behaviour, you can use the tabindex attribute to change the order that items are selected. The commandButton with the lowest tabindex value will be executed when you press enter.

2
  • 1
    Thank you for the advice. I tried adding tabindex to commandbutton attribute as follows: <apex:commandButton action="{!page1}" tabindex="1" value="back"/> <apex:commandButton action="{!page3}" tabindex="0" value="next"/> But the back button was still the one triggered after I pressed the enter key. Could you please tell me what I might have done wrong?
    – lw29
    Jun 30, 2014 at 6:38
  • 1
    Agree with comment from @lw29; this answer does not work. Setting tabindex on commandButtons does affect tab order, but has no effect on which button's action is invoked when the 'return' key is pressed. Dec 16, 2015 at 20:59

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .