I currently have a select dropdown box which shows one of several input file browsers (each allows only one of ".txt", ".cvs" and so on) according to the selected option. I want to change the form's action depending on the selected option so I can handle each case in a different method on the controller's side.

This example works when not using thymeleaf:

$("#myselect").change(function() {
    if($(this).val() == "option1"){
        $("#form").attr("action", "/processopt1");
    }
});

I am trying the following for thymeleaf without success:

$("#myselect").change(function() {
    if($(this).val() == "option1"){
        $("#form").attr("th:action", "@{/processopt1}");
    }
});

Thanks in advance.

I currently have a select dropdown box which shows one of several input file browsers (each allows only one of ".txt", ".cvs" and so on) according to the selected option. I want to change the form's action depending on the selected option so I can handle each case in a different method on the controller's side.

This example works when not using thymeleaf:

$("#myselect").change(function() {
    if($(this).val() == "option1"){
        $("#form").attr("action", "/processopt1");
    }
});

I am trying the following for thymeleaf without success:

$("#myselect").change(function() {
    if($(this).val() == "option1"){
        $("#form").attr("th:action", "@{/processopt1}");
    }
});

Thanks in advance.

• javascript
• html
• thymeleaf

Share Improve this question Follow edited Sep 23, 2015 at 11:43 DiegoSahagun asked Sep 23, 2015 at 10:45 DiegoSahagunDiegoSahagun 75811 gold badge1111 silver badges2222 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You must enable script inlining. For Thymeleaf expressions to be evaluated, you must use the mented out double brackets syntax: /*[[...]]*/

<script th:inline="javascript">
    var action = /*[[@{/processopt1}]]*/ '/processopt1';
    $("#myselect").change(function() {
        if($(this).val() == "option1"){
            $("#form").attr("action", action);
        }
    });
</script>

Because the expression is mented out, templating will still work when staticly displaying the page.

When the expression is evaluated, Thymeleaf will automatically remove any code after the expression.

Data attributes

Another option would be to use data attributes on the items of your select box, which you can also build dynamically with Thymeleaf:

<select id="myselect" th:forEach="item : ${items}>
    <option th:attr="data-action=${item.action}">${item.name}</option> 
</select>

With this option, you can avoid script inlining when you change your script to the following:

$("#myselect").change(function() {
    var action = $("#myselect option:selected").data("action");
    $("#form").attr("action", action);
});