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:
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()
?