Wicket: Preventing form submission by a TextField within a Wizard step

Question

Question relates to Wicket 1.6

I have a wizard step, which includes a Textfield component. When I press the Enter key, this is being handled by the default button of the Wizard bar ('Next'), and it advances to the next step in the Wizard. I don't want this to happen. When I hit Enter on the Textfield I just want the value to be updated, but remain on the same page.

I tried overriding the onBeforeRender() method of my Wizard class, which as you can see sets the default button of the containing form to null. However this now results in the 'Prev' button being triggered when I hit Enter, so the wizard goes back to the previous step.

public class ConfigurationWizard extends Wizard {

   ....

   @Override
   protected void onBeforeRender()
    {
        super.onBeforeRender();
        Component buttonBar = getForm().get(BUTTONS_ID);
        if (buttonBar instanceof IDefaultButtonProvider)
        {
            getForm().setDefaultButton(null);
        }
    }
}

So the basic question is, how do I disable the default button behaviour of the Wizard?

Answer 1

This has nothing to do with the wizard buttons.

The TextField <input> is doing a form submit when the Enter key is pressed. This is standard behaviour for the <input> element.

The solution is to catch the Enter key press for the <input> and prevent the default behaviour This bit of javascript magic does the trick for me:

   <script type="text/javascript">
   $(document).ready(function() {
             $("#gridDiv").delegate("input","keypress",function(e){
                 if(e.originalEvent.keyCode == 13){
                     e.preventDefault();
                 }
              });
          });
   </script>

where 'gridDiv' is the id of the <div> containing the TextField

Answer 2

My approach (with a nice Wicket behavior)

Usage

TextField<String> myField = new TextField<String>("myField", myModel());
myField.add(new PreventSubmitOnEnterBehavior());

Behavior

public class PreventSubmitOnEnterBehavior extends Behavior
{
    private static final long serialVersionUID = 1496517082650792177L;

    public PreventSubmitOnEnterBehavior()
    {
    }

    @Override
    public void bind( Component component )
    {
        super.bind( component );

        component.add( AttributeModifier.replace( "onkeydown", Model.of( "if(event.keyCode == 13) {event.preventDefault();}" ) ) );
    }
}

Answer 3

I prefer another approach:

I use AjaxButtons for every button needed, with the specific submit code in the overrided onSubmit():

AjaxButton linkSubmit = new AjaxButton("linkSubmit")
@Override
public void onSubmit(AjaxRequestTarget target, Form form) {
super.onSubmit();
// Submit code goes here....
// ...
setResponsePage(new NewPage());
}
@Override
public void onError(AjaxRequestTarget target, Form form) {
}
};

My form doesn't need a "onSubmit()" method.

And the markup doesn't have any submit buttons. All buttons are coded like this:

With this approach you don't need to mess with javascript codes. The page simply will do nothing if you press Enter. You'll have to click your buttons to submit each one.

Hope this can help you.