Search code examples
javascripthtmlthymeleafjavascript-objectsspring-thymeleaf

springBoot + Thymeleaf: get value of select


I have this piece of code:

<script>

    function updateAction() {
        var form = document.getElementById('myForm');
        var langSelect = document.querySelector('select[name="langCode"]');
        var categorySelect = document.querySelector('select[name="blogCategory"]');

        var currentUrl = new URL(window.location.href);
        currentUrl.searchParams.set('langCode', langSelect.value);
        currentUrl.searchParams.set('blogCategory', categorySelect.value);

        form.action = currentUrl.toString();
        alret(form.action);
        form.submit();
    }

</script>

<form id="myForm" th:action="@{/blogs}" method="post" th:with="language=${#locale.language}">

                <select name="langCode" onchange="updateAction()">
                    <option th:value="es" th:selected="${language=='es'}">Español</option>
                    <option th:value="fr" th:selected="${language=='fr'}">Français</option>
                    <option th:value="pt" th:selected="${language=='pt'}">Português</option>
                    <option th:value="en" th:selected="${language=='en'}">English</option>
                </select>

                <select th:id="blogCategory" onchange="updateAction()">
                    <option value="value1">Option 1</option>
                    <option value="value2">Option 2</option>
                    <option value="value3">Option 3</option>
                </select>

            </form>

but when I change I have this error:

enter image description here

enter image description here


Solution

  • There is no select[name="blogCategory"] which can be found by a selector.

    Try this instead:

    var categorySelect = document.querySelector('#blogCategory');
    

    Also, theres a typo here:

    alret(form.action);
    

    Maybe better change to alert()?