Prevent h:Commandbutton from submitting form

Question

I have a form and two commandbuttons embedded in it as shown.

<h:commandButton label="Submit" type="button" 
    image="resources/images/Save4.jpg" 
    actionListener="#{userController.createNewUser()}" /> 

<h:commandButton label="Home" 
    image="resources/images/Save4.jpg" 
    action="/index.jsf?faces-redirect=true" /> 

Clicking on Home button should redirect to index.jsf but it causes form submission. I dont want to put the home command in another form tag as it will cause UI Distortion. Please suggest a way out.

Answer 1

A command button submits the entire POST form. It's the wrong tool for plain page-to-page navigation. It's not SEO friendly either (searchbots don't index POST forms).

If the sole functional requirement is having a clickable image which should navigate to a different page, then just use <h:link><h:graphicImage>.

<h:link outcome="/index.jsf">
    <h:graphicImage name="images/Save4.jpg" />
</h:link>