Grails Cookbook - A collection of tutorials and examples

Grails actionSubmitImage Tag Example

The actionSubmitImage tag (<g:actionSubmitImage>) is similar to actionSubmit. It lets you have multiple action targets on the same form. The only difference is that this tag renders the button from source image. For example:
fx01
As shown, the submit buttons are images instead of plain text. Similar to actionSubmit, it can have multiple target controller action.
Clicking Sum will give you the answer:
fx02
Clicking Difference will give you the answer:
fx03
Clicking Product will give you the answer:
fx04
Clicking Quotient will give you the answer:
fx05

Controller Code


Here is the code of the controller
package asia.grails.test
class CalcController {
	def displayForm() {
	}
	def calculateSum(int a, int b) {
		render (view:'result', model:[answer:a+b])
	}
	def calculateDiff(int a, int b) {
		render (view:'result', model:[answer:a-b])
	}
	def calculateProduct(int a, int b) {
		render (view:'result', model:[answer:a*b])
	}
	def calculateQuotient(int a, int b) {
		render (view:'result', model:[answer:a/b])
	}
}

View Code

Here is how you use the actionSubmit tag in displayForm.gsp

<html xmlns="http://www.w3.org/1999/html">
<head>
	<meta name="layout" content="main"/>
	<title>Calc</title>
</head>
<body>
<g:form>
	First Number: <g:textField name="a"/><br/>
	Second Number: <g:textField name="b"/><br/>
	<g:actionSubmitImage value="Sum" action="calculateSum" 
		src="${resource(dir: 'images', file: 'sum.png')}"/>
	<g:actionSubmitImage value="Difference" action="calculateDiff" 
		src="${resource(dir: 'images', file: 'diff.png')}"/>
	<g:actionSubmitImage value="Product" action="calculateProduct" 
		src="${resource(dir: 'images', file: 'product.png')}"/>
	<g:actionSubmitImage value="Quotient" action="calculateQuotient" 
		src="${resource(dir: 'images', file: 'quotient.png')}"/>
</g:form>
</body>
</html>

Note that the images are located at Project Source » web-app » images As shown above, we can submit the form to different actions of the same controller, by having as many actionSubmit tag as needed.

And this is the code of result.gsp

<html xmlns="http://www.w3.org/1999/html">
<head>
	<meta name="layout" content="main"/>
	<title>Calc</title>
</head>
<body>
	The answer is ${answer}
</body>
</html>


Other Grails Tag Examples


Tags: actionSubmitImage, Grails Tag