How to set value of one field as param while using remote link gsp

I am using gsp for the first time and i have a requirement to update a value when a button is clicked. For that I am using remote link.

I have the below textArea with id update_${test.id}

<g:textArea name="test" id="update_${test.id}" value="${test?.number}" disabled="${readonly ? true : false}" />

I need to be able to set the value of the param required to be the value inside the textArea.

<g:remoteLink action="updateTest" params="{required:\$('#update_${test.id}').val()}" update="updateOnClick" class="btn btn-default"><span class="icon-save"></span></g:remoteLink>

This is obviously a wrong approach. Could some one help me with this.

Solution

The following example uses ajax to pass all the form fields to the controller using serialize, you can pick out which ones you want in your action as we have done below by printing the value of the text area.

We then render some text which updates a div on screen.

Controller

class TestStuffController {

    def index(){}

    def myAction() {
        println params.myTextArea
        render 'Updated'
    }
}

index.gsp

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main">
    <script type="text/javascript">
        $( document ).ready( function() {
            $( '#myButton' ).on( 'click' , function (event) {
                $.ajax({
                    url: "${g.createLink( controller: 'testStuff', action: 'myAction')}",
                    type: "POST",
                    data: $( "form" ).serialize(),
                    success: function ( data ) {
                        $( '#myDiv' ).html( data );
                    },
                    error: function( j, status, eThrown ) { console.log( 'Error ' + eThrown ) }
                });
            });
        });
    </script>
</head>
    <body>
        <div>
            <div id="myDiv"></div>

            <g:form id="myForm">
                <g:textArea name="myTextArea" id="myTextArea" />
                <button type="button" name="myButton" id="myButton">Update</button>
            </g:form>
        </div>
    </body>
</html>