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.

You should use or for this purposes. – Ioan Jan 20 '14 at 12:28 — Ioan, Jan 20 '14 at 12:28

score 3 · Answer 1 · answered Jan 20 '14 at 13:10

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>

score 1 · Answer 2 · answered Jan 20 '14 at 12:25

1

It's a bad idea to use POST for navigation, anyway. Instead, use something like this:

<h:button label="Home" image="..." outcome="/index" />

answered Jan 20 '14 at 12:25

mabi

5,279
2
43
78

1

This is only not SEO-friendly either. Navigation takes here place by JavaScript instead of HTML. Searchbots usually doesn't chipher/follow JavaScript code. – BalusC Jan 20 '14 at 17:11

Prevent h:Commandbutton from submitting form

2 Answers2