diff --git a/internal/templates/sort_filter.templ b/internal/templates/sort_filter.templ
index 76a84de..750015e 100644
--- a/internal/templates/sort_filter.templ
+++ b/internal/templates/sort_filter.templ
@@ -11,7 +11,7 @@ templ SortFilter(opts SortFilterOptions) {
 	<div class="sort-filter">
 		<div class="sort-filter-group">
 			<label for="sort-select">sort by</label>
-			<select id="sort-select" class="sort-filter-select" onchange="document.getElementById('sort-form').submit()">
+			<select id="sort-select" class="sort-filter-select" onchange="document.getElementById('sort-input').value = this.value; document.getElementById('sort-form').submit()">
 				<option value="date" selected?={opts.Sort == "date"}>date added</option>
 				<option value="title" selected?={opts.Sort == "title"}>title</option>
 				<option value="score" selected?={opts.Sort == "score"}>score</option>
@@ -19,7 +19,7 @@ templ SortFilter(opts SortFilterOptions) {
 		</div>
 		<div class="sort-filter-group">
 			<label for="order-select">order</label>
-			<select id="order-select" class="sort-filter-select" onchange="document.getElementById('sort-form').submit()">
+			<select id="order-select" class="sort-filter-select" onchange="document.getElementById('order-input').value = this.value; document.getElementById('sort-form').submit()">
 				<option value="desc" selected?={opts.Order == "desc"}>descending</option>
 				<option value="asc" selected?={opts.Order == "asc"}>ascending</option>
 			</select>
@@ -35,12 +35,4 @@ templ SortFilter(opts SortFilterOptions) {
 			<input type="hidden" name="status" value={opts.Status} />
 		}
 	</form>
-	<script>
-		document.getElementById('sort-select').addEventListener('change', (e) => {
-			document.getElementById('sort-input').value = e.target.value;
-		});
-		document.getElementById('order-select').addEventListener('change', (e) => {
-			document.getElementById('order-input').value = e.target.value;
-		});
-	</script>
 }