How can I get the current selection of a selectBox to use in a g:link?

Question

<g:select name="confer" from="${orig}" optionKey="id" value="ola"  />

<g:link controller="conferenceUser" action="addFavourite" params="[confer: confer]">Some text</g:link>

How can I get current selection from selectBox to pass in the params of g:link?

Answer 1

The g:link params are set when the page has been rendered. You will need some javascript which reacts on the select event of the select box. Checkout the jQuery Change method at http://api.jquery.com/change/ and look at Change URL parameters on how to manipulate the url query params.

Another way could be to intercept the click event and fetch the current value of the select element and then proceed.

Answer 2

As laufzeit mentions, in this scenario, it will be necessary to use javascript. params = "[...]" when rendering will become a query string, so in your case it will be necessary to intercept the value of the selected option and add it to the query string. The following is a basic implementation. Starting from how these grails tags will be rendered in html, you could try

Assuming your example will render something like this:

<select name="confer" id="confer">
    <option value="1">confer 1</option>
    <option value="2">confer 2</option>
    <option value="3">confer 3</option>
</select>

<a href="controller/action" id="anchor">Some text</a>

And assuming that you must assign the value of the selected option during the loading of the view and when changing the select option, you could try this script

<script>
    const anchor = document.querySelector('#anchor');
    const confer = document.querySelector('#confer');

    confer.addEventListener('change', event => addParams());

    function addParams() {
        const host = getHost();

        anchor.href = `${host}?confer=${confer.value}`
    }

    function getHost() {
        return window.location.origin;
    }

    addParams()
</script>

Here testable version

const anchor = document.querySelector('#anchor');
const confer = document.querySelector('#confer');

confer.addEventListener('change', event => addParams());

function addParams() {
    const host = getHost();

    anchor.href = `${host}?confer=${confer.value}`
}

function getHost() {
    return window.location.origin;
}

addParams()

<select name="confer" id="confer">
    <option value="1">confer 1</option>
    <option value="2">confer 2</option>
    <option value="3">confer 3</option>
</select>

<a href="controller/action" id="anchor">Some text</a>

In order to visualize the modified params you must inspect the anchor element