Link around button to button that links

Question

So I had this code:

<g:link class="create" action="create" params="${params}">
    <input type="button" value="New Field Trip Location">
</g:link>


<g:set var="paramsArray" value="$params" />
<button type="button" onClick="location.href='${createLink(controller:'fieldTripLocation', action:'create', params: $params)}'">New Field Trip Location</button>

The first code segment works on chrome and such but I have been told it is bad style having a link around a button. To fix this I tried to add code segment 2 using a paramsArray variable to pass my dynamic sized parameters but am unsure how to send my params variable(more like an array made up of a bunch of different variables such as index and cameFrom) to the next view. So overall summary: I have ugly bad code that works but want to fix it up but can't seem to pass multiple dynamic params and need your help. Thanks!

Answer 1

Why don't you use just a link with proper css style:

<g:link class="create linkButton" action="create" params="${params}">
    New Field Trip Location
</g:link>

<style type="text/css">
.linkButton {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
</style>