Grails actionSubmitImage Tag Example

May 16, 2014 Tag comments

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:

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:

Clicking Difference will give you the answer:

Clicking Product will give you the answer:

Clicking Quotient will give you the answer:

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

Beginners Tutorial

Example Applications

If you like my posts, like my Facebook page please :)

Links