diff --git a/evap/contributor/templates/contributor_evaluation_form.html b/evap/contributor/templates/contributor_evaluation_form.html
index 5f83768512..ecd2e22c51 100644
--- a/evap/contributor/templates/contributor_evaluation_form.html
+++ b/evap/contributor/templates/contributor_evaluation_form.html
@@ -127,8 +127,14 @@ <h5 class="modal-title" id="previewModalLabel">{% trans 'Preview' %}</h5>
     {% include 'confirmation_modal.html' with modal_id='approveEvaluationModal' title=title question=question action_text=action_text btn_type='primary' %}
     <script type="text/javascript">
         function approveEvaluationModalAction(dataId) {
-            $('#evaluation-form').append('<input type="hidden" name="operation" value="approve" />');
-            $('#evaluation-form').submit();
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = "operation";
+            input.value = "approve";
+
+            const form = document.getElementById("evaluation-form");
+            form.appendChild(input);
+            form.requestSubmit();
         };
     </script>
 
diff --git a/evap/contributor/templates/contributor_index.html b/evap/contributor/templates/contributor_index.html
index e3d8253eb9..e61132d2cc 100644
--- a/evap/contributor/templates/contributor_index.html
+++ b/evap/contributor/templates/contributor_index.html
@@ -228,14 +228,15 @@ <h5 class="modal-title" id="{{ modal_id }}Label">{% trans 'Delegate preparation'
 
         <script type="text/javascript">
             function {{ modal_id }}Show(evaluationName, action) {
+                const modal = document.getElementById("{{ modal_id }}");
                 // set form's action location
-                $('#{{ modal_id }} form').attr('action', action);
+                modal.querySelectorAll("form").forEach(form => form.action = action);
 
                 // put the correct evaluation name in the modal
-                $('#{{ modal_id }} [data-label=""]').text(evaluationName);
+                modal.querySelectorAll('[data-label=""]').forEach(el => el.innerText = evaluationName);
 
                 // unselect any previously selected options in the modal
-                $('#{{ modal_id }} select').val(null).trigger('change');
+                modal.querySelectorAll("select").forEach(select => select.tomselect.clear());
 
                 // show modal
                 var {{ modal_id }} = new bootstrap.Modal(document.getElementById('{{ modal_id }}'));
diff --git a/evap/evaluation/templates/base.html b/evap/evaluation/templates/base.html
index 6657af375c..cdb785d8e1 100644
--- a/evap/evaluation/templates/base.html
+++ b/evap/evaluation/templates/base.html
@@ -65,6 +65,7 @@
         <script type="text/javascript" src="{% static 'js/Sortable.min.js' %}"></script>
 
         <script type="module" src="{% static 'js/csrf-utils.js' %}"></script>
+        <script type="module" src="{% static 'js/utils.js' %}"></script>
 
         <script type="module" src="{% static 'js/base-template.js' %}"></script>
         <script type="text/javascript">
@@ -82,17 +83,23 @@
             activateTooltips();
 
             // These are workarounds around incompatibilities of django, django-dynamic-formsets, and tomselect.
-            // tomselect can't handle already tomselect'd forms that were copies made by
-            // django-dynamic-formsets' "add another" button, so we take a copy of a non-tomselect'd form here
-            var templateForm = $(".tomselecttr").last().clone();
-
-            // later we use this class to give this to django-dynamic-formsets
-            // as template and to make sure it does not get tomselect'd
-            templateForm.addClass("form-template").css("display", "none");
-            // for some reason django-dynamic-formsets does not hide the checkbox like it should
-            templateForm.find(':checkbox').last().attr("type", "hidden");
-            // For some reason, django validates this template if it's part of the form, so we insert the copy outside of the form.
-            templateForm.insertAfter($('.tomselectform'));
+            // tomselect can't handle already tomselect'd forms that were copies made by django-dynamic-formsets'
+            // "add another" button, so we take a copy of a non-tomselect'd form here
+            const tomSelectRows = document.querySelectorAll(".tomselecttr");
+
+            if(tomSelectRows.length != 0) {
+                const templateForm = tomSelectRows[tomSelectRows.length - 1].cloneNode(true);
+
+                // later we use this class to give this to django-dynamic-formsets as template and to make sure it does not get tomselect'd
+                templateForm.classList.add("form-template");
+                templateForm.style.display = "none";
+
+                // django-dynamic-formsets doesn't hide the "delete this row" input in the clone since it's not part of the formset.
+                templateForm.querySelectorAll("input[id$=-DELETE]").forEach(input => {input.type = "hidden";});
+
+                // For some reason, django validates this template if it's part of the form, so we insert the copy outside of the form.
+                document.querySelector(".tomselectform").insertAdjacentElement("afterend", templateForm);
+            }
 
             // used in derived templates. Tag inputs are multi-inputs where users can add options
             const tagTomSelectOptions = {
@@ -160,27 +167,29 @@
             };
             applyTomSelect(document.querySelectorAll("select:not(.form-template select):not(.no-tomselect)"));
 
-            document.addEventListener('change', function(e){
-               $(e.target).removeClass("invalid")
-            }, true);
+            document.addEventListener('change', e => e.target.classList.remove("invalid"), true);
 
             // activate clickable hover tables
-            $(".table-seamless-links [data-url]").each(function() {
-                const row = $(this);
-                const link = "<a href='" + row.data("url") + "'></a>";
-                row.children().wrapInner(link);
+            document.querySelectorAll(".table-seamless-links [data-url]").forEach(row => {
+                for(const table_data of row.children) {
+                    const wrapping_anchor = document.createElement("a");
+                    wrapping_anchor.href = row.dataset["url"];
+                    wrapping_anchor.append(...table_data.children);
+                    table_data.replaceChildren(wrapping_anchor);
+                }
             });
 
-            $(".hover-row").each(function() {
-                const row = $(this);
-                row
-                    .find(".btn:not(.btn-row-hover)")
-                    .mouseover(() => row.removeClass("hover-row"))
-                    .mouseout(() => row.addClass("hover-row"));
+            document.querySelectorAll(".hover-row").forEach(row => {
+                row.querySelectorAll(".btn:not(.btn-row-hover)").forEach(button => {
+                    button.addEventListener("mouseover", () => row.classList.remove("hover-row"));
+                    button.addEventListener("mouseout", () => row.classList.add("hover-row"));
+                });
             });
 
             function setSpinnerIcon(id) {
-                $("#" + id).empty().removeClass().addClass('fas fa-spinner fa-spin');
+                const element = document.getElementById(id);
+                element.innerHTML = "";
+                element.className = "fas fa-spinner fa-spin";  // clears all other classes
             };
         </script>
 
diff --git a/evap/evaluation/templates/evap_evaluation_edit_js.html b/evap/evaluation/templates/evap_evaluation_edit_js.html
index f1f6f37048..9fe79b85c1 100644
--- a/evap/evaluation/templates/evap_evaluation_edit_js.html
+++ b/evap/evaluation/templates/evap_evaluation_edit_js.html
@@ -8,7 +8,7 @@
 
             questionnaireChanged = false;
             $(row.find("input[name$=-questionnaires]")).each(function () {
-                if(this.checked)
+                if (this.checked)
                     questionnaireChanged = true;
             })
 
@@ -29,52 +29,48 @@
 {% endif %}
 
 <script type="text/javascript">
-    function makeDisabledClickHandler() {
-        return function () {
-            // suppress toggling disabled buttons
-            if ($(this).hasClass("disabled"))
-                return false;
-        }
-    }
-
     function makeDoesNotContributeChangeHandler(i) {
-        return function () {
-            // don't do anything on disabled buttons
-            if ($(this).hasClass("disabled"))
+        return () => {
+            const doesNotContributeInput = document.querySelector("input[name=contributions-" + i + "-does_not_contribute]");
+
+            if (doesNotContributeInput.disabled)
                 return false;
-            if($("input[name=contributions-" + i + "-does_not_contribute]").prop("checked")) {
+
+            if (doesNotContributeInput.checked) {
                 // uncheck and disable all questionnaire checkboxes
-                $("input[name=contributions-" + i + "-questionnaires]").prop("checked", false);
-                $("input[name=contributions-" + i + "-questionnaires]").prop("disabled", true);
-            }
-            else {
+                document.querySelectorAll("input[name=contributions-" + i + "-questionnaires]").forEach(checkbox => {
+                    checkbox.checked = false;
+                    checkbox.disabled = true;
+                });
+            } else {
                 // enable all questionnaire checkboxes
-                $("input[name=contributions-" + i + "-questionnaires]").prop("disabled", false);
+                document.querySelectorAll("input[name=contributions-" + i + "-questionnaires]").forEach(checkbox => {
+                    checkbox.disabled = false;
+                });
             }
-        }
+        };
     }
 
     function getContributorCount() {
-        return $("#contribution_table select").length;
+        return document.querySelectorAll("#contribution_table select").length;
     }
 
     function assignClickHandlers() {
-        var count = getContributorCount();
-        for(var i = 0; i < count; i++)
-        {
-            $("input[name=contributions-" + i + "-role]").parent().click(makeDisabledClickHandler());
-            $("input[name=contributions-" + i + "-textanswer_visibility]").parent().click(makeDisabledClickHandler());
-            $("input[name=contributions-" + i + "-does_not_contribute]").parent().change(makeDoesNotContributeChangeHandler(i));
+        const count = getContributorCount();
+        for (let i = 0; i < count; i++) {
+            document.querySelector(`input[name=contributions-${i}-does_not_contribute]`).parentElement.addEventListener("click", makeDoesNotContributeChangeHandler(i));
         }
     }
 
     assignClickHandlers();
 
     // apply initial settings
-    for(var i = 0; i < getContributorCount(); i++){
-        if($("input[name=contributions-" + i + "-does_not_contribute]").prop("checked")) {
-            $("input[name=contributions-" + i + "-questionnaires]").prop("checked", false);
-            $("input[name=contributions-" + i + "-questionnaires]").prop("disabled", true);
+    for (let i = 0; i < getContributorCount(); i++){
+        if (document.querySelector("input[name=contributions-" + i + "-does_not_contribute]").checked) {
+            document.querySelectorAll("input[name=contributions-" + i + "-questionnaires]").forEach(checkbox => {
+                checkbox.checked = false;
+                checkbox.disabled = true;
+            });
         }
     }
 </script>
diff --git a/evap/evaluation/templates/faq.html b/evap/evaluation/templates/faq.html
index 5e1c8d4f46..582558f48e 100644
--- a/evap/evaluation/templates/faq.html
+++ b/evap/evaluation/templates/faq.html
@@ -34,7 +34,6 @@ <h2 id="faq-{{ question.id }}-q" class="accordion-header">
 
         if(type == "q"){
             // open collapsed answer and scroll into center
-            const answer_div = $("#faq-"+id+"-a");
             window.history.pushState('', id, '/faq#faq-' + id + '-q');
             var answerCard = document.getElementById("faq-"+id+"-a");
             var answerCardCollapse = bootstrap.Collapse.getOrCreateInstance(answerCard);
diff --git a/evap/grades/templates/grades_course_view.html b/evap/grades/templates/grades_course_view.html
index 3145cd87f2..7ab7b60fcb 100644
--- a/evap/grades/templates/grades_course_view.html
+++ b/evap/grades/templates/grades_course_view.html
@@ -58,13 +58,14 @@ <h3 class="mb-3">{{ course.name }} ({{ semester.name }})</h3>
     {% include 'confirmation_modal.html' with modal_id='deleteGradedocumentModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function deleteGradedocumentModalAction(dataId) {
-            $.ajax({
-                type: "POST",
-                url: "{% url 'grades:delete_grades' %}",
-                data: {"grade_document_id": dataId},
-                success: function(){ $('#grade_document-row-'+dataId).hide('slow', function(){ $('#grade_document-row-'+dataId).remove(); }); },
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); }
-            });
+            fetch("{% url 'grades:delete_grades' %}", {
+                body: new URLSearchParams({grade_document_id: dataId}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                fadeOutThenRemove(document.getElementById('grade_document-row-'+dataId));
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
     </script>
 {% endblock %}
diff --git a/evap/grades/templates/grades_semester_view.html b/evap/grades/templates/grades_semester_view.html
index 2264725265..ae9d586115 100644
--- a/evap/grades/templates/grades_semester_view.html
+++ b/evap/grades/templates/grades_semester_view.html
@@ -108,13 +108,14 @@ <h3 class="col-8 mb-0">
     {% include 'confirmation_modal.html' with modal_id='confirmNouploadModal' title=title question=question action_text=action_text btn_type='primary' %}
     <script type="text/javascript">
         function confirmNouploadModalAction(dataId) {
-            $.ajax({
-                type: "POST",
-                url: "{% url 'grades:toggle_no_grades' %}",
-                data: {"course_id": dataId},
-                success: function(){ location.reload(); },
-                error: function(){}
-            });
+            fetch("{% url 'grades:toggle_no_grades' %}", {
+                body: new URLSearchParams({course_id: dataId}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                location.reload();
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
     </script>
     {% trans 'Will final grades be uploaded?' as title %}
diff --git a/evap/rewards/templates/rewards_reward_point_redemption_events.html b/evap/rewards/templates/rewards_reward_point_redemption_events.html
index 105637763e..afda183798 100644
--- a/evap/rewards/templates/rewards_reward_point_redemption_events.html
+++ b/evap/rewards/templates/rewards_reward_point_redemption_events.html
@@ -33,15 +33,17 @@
     {% trans 'Do you really want to delete the event <strong data-label=""></strong>?' as question %}
     {% trans 'Delete event' as action_text %}
     {% include 'confirmation_modal.html' with modal_id='deleteEventModal' title=title question=question action_text=action_text btn_type='danger' %}
+
     <script type="text/javascript">
         function deleteEventModalAction(dataId) {
-            $.ajax({
-                type: "POST",
-                url: "{% url 'rewards:reward_point_redemption_event_delete' %}",
-                data: {"event_id": dataId},
-                success: function(){ $('#event-row-'+dataId).hide('slow', function(){ $('#event-row-'+dataId).remove(); }); },
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); }
-            });
+            fetch("{% url 'rewards:reward_point_redemption_event_delete' %}", {
+                body: new URLSearchParams({event_id: dataId}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                fadeOutThenRemove(document.querySelector('#event-row-'+dataId));
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
     </script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_email_preview_form.html b/evap/staff/templates/staff_email_preview_form.html
index a1d78d89a2..09b4219048 100644
--- a/evap/staff/templates/staff_email_preview_form.html
+++ b/evap/staff/templates/staff_email_preview_form.html
@@ -3,7 +3,7 @@
          {% if heading %}<h4 class="card-title">{{ heading }}</h4>{% endif %}
         <div class="form-check mb-2">
             <input class="form-check-input" id="send_email{{ id_suffix }}" type="checkbox" name="send_email{{ id_suffix }}"
-                checked onclick="$('#email_form{{ id_suffix }}').toggle();" />
+                checked onclick="document.getElementById('email_form').classList.toggle('d-none');" />
             <label class="form-check-label" for="send_email{{ id_suffix }}">{% trans 'Send email notifications' %}</label>
         </div>
         <div class="email-form" id="email_form{{ id_suffix}}">
diff --git a/evap/staff/templates/staff_evaluation_person_management.html b/evap/staff/templates/staff_evaluation_person_management.html
index 3ba518e8cd..55ad0ab6d5 100644
--- a/evap/staff/templates/staff_evaluation_person_management.html
+++ b/evap/staff/templates/staff_evaluation_person_management.html
@@ -136,11 +136,14 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% include 'confirmation_modal.html' with modal_id='importParticipantsModal' title=title question=question action_text=action_text btn_type='primary' %}
     <script type="text/javascript">
         function importParticipantsModalAction(dataId) {
-            var input = $("<input>")
-               .attr("type", "hidden")
-               .attr("name", "operation").val(dataId);
-            $('#participant-import-form').append(input);
-            $('#participant-import-form').submit();
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = "operation";
+            input.value = dataId;
+
+            const form = document.getElementById("participant-import-form");
+            form.appendChild(input);
+            form.requestSubmit();
         };
     </script>
 
@@ -150,11 +153,14 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% include 'confirmation_modal.html' with modal_id='replaceParticipantsModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function replaceParticipantsModalAction(dataId) {
-            var input = $("<input>")
-                .attr("type", "hidden")
-                .attr("name", "operation").val(dataId);
-            $('#participant-import-form').append(input);
-            $('#participant-import-form').submit();
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = "operation";
+            input.value = dataId;
+
+            const form = document.getElementById("participant-import-form");
+            form.appendChild(input);
+            form.requestSubmit();
         };
     </script>
 
@@ -164,11 +170,14 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% include 'confirmation_modal.html' with modal_id='copyParticipantsModal' title=title question=question action_text=action_text btn_type='primary' %}
     <script type="text/javascript">
         function copyParticipantsModalAction(dataId) {
-            var input = $("<input>")
-                .attr("type", "hidden")
-                .attr("name", "operation").val(dataId);
-            $('#participant-copy-form').append(input);
-            $('#participant-copy-form').submit();
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = "operation";
+            input.value = dataId;
+
+            const form = document.getElementById("participant-copy-form");
+            form.appendChild(input);
+            form.requestSubmit();
         };
     </script>
 
@@ -178,11 +187,14 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% include 'confirmation_modal.html' with modal_id='copyReplaceParticipantsModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function copyReplaceParticipantsModalAction(dataId) {
-            var input = $("<input>")
-                .attr("type", "hidden")
-                .attr("name", "operation").val(dataId);
-            $('#participant-copy-form').append(input);
-            $('#participant-copy-form').submit();
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = "operation";
+            input.value = dataId;
+
+            const form = document.getElementById("participant-copy-form");
+            form.appendChild(input);
+            form.requestSubmit();
         };
     </script>
 
@@ -192,11 +204,14 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% include 'confirmation_modal.html' with modal_id='importContributorsModal' title=title question=question action_text=action_text btn_type='primary' %}
     <script type="text/javascript">
         function importContributorsModalAction(dataId) {
-            var input = $("<input>")
-                .attr("type", "hidden")
-                .attr("name", "operation").val(dataId);
-            $('#contributor-import-form').append(input);
-            $('#contributor-import-form').submit();
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = "operation";
+            input.value = dataId;
+
+            const form = document.getElementById("contributor-import-form");
+            form.appendChild(input);
+            form.requestSubmit();
         };
     </script>
 
@@ -206,11 +221,14 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% include 'confirmation_modal.html' with modal_id='replaceContributorsModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function replaceContributorsModalAction(dataId) {
-            var input = $("<input>")
-                .attr("type", "hidden")
-                .attr("name", "operation").val(dataId);
-            $('#contributor-import-form').append(input);
-            $('#contributor-import-form').submit();
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = "operation";
+            input.value = dataId;
+
+            const form = document.getElementById("contributor-import-form");
+            form.appendChild(input);
+            form.requestSubmit();
         };
     </script>
 
@@ -220,11 +238,14 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% include 'confirmation_modal.html' with modal_id='copyContributorsModal' title=title question=question action_text=action_text btn_type='primary' %}
     <script type="text/javascript">
         function copyContributorsModalAction(dataId) {
-            var input = $("<input>")
-                .attr("type", "hidden")
-                .attr("name", "operation").val(dataId);
-            $('#contributor-copy-form').append(input);
-            $('#contributor-copy-form').submit();
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = "operation";
+            input.value = dataId;
+
+            const form = document.getElementById("contributor-copy-form");
+            form.appendChild(input);
+            form.requestSubmit();
         };
     </script>
 
@@ -234,11 +255,14 @@ <h6 class="card-subtitle mb-2 text-muted">{% trans 'To CSV file' %}</h6>
     {% include 'confirmation_modal.html' with modal_id='copyReplaceContributorsModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function copyReplaceContributorsModalAction(dataId) {
-            var input = $("<input>")
-                .attr("type", "hidden")
-                .attr("name", "operation").val(dataId);
-            $('#contributor-copy-form').append(input);
-            $('#contributor-copy-form').submit();
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = "operation";
+            input.value = dataId;
+
+            const form = document.getElementById("contributor-copy-form");
+            form.appendChild(input);
+            form.requestSubmit();
         };
     </script>
 
diff --git a/evap/staff/templates/staff_questionnaire_form.html b/evap/staff/templates/staff_questionnaire_form.html
index c85c87fe61..21122e80d4 100644
--- a/evap/staff/templates/staff_questionnaire_form.html
+++ b/evap/staff/templates/staff_questionnaire_form.html
@@ -94,12 +94,12 @@ <h5 class="card-title">{% trans 'Questions' %}</h5>
             makeFormSortable("question_table", "questions", rowChanged, rowAdded, "", true, true);
 
             const selectChangedHandler = function(e) {
-                const checkbox = $($(this).closest("td.question-type")).find("input");
+                const checkbox = this.closest("td.question-type").querySelector("input[type=checkbox]");
                 if (e.currentTarget.value == 0 || e.currentTarget.value == 5) {  // 0: Text question; 5: Heading
-                    checkbox.prop("checked", false);
-                    checkbox.prop("disabled", true);
+                    checkbox.checked = false;
+                    checkbox.disabled = true;
                 } else {
-                    checkbox.prop("disabled", false);
+                    checkbox.disabled = false;
                 }
             };
 
diff --git a/evap/staff/templates/staff_questionnaire_index.html b/evap/staff/templates/staff_questionnaire_index.html
index df3da253d1..8a83c00656 100644
--- a/evap/staff/templates/staff_questionnaire_index.html
+++ b/evap/staff/templates/staff_questionnaire_index.html
@@ -53,13 +53,14 @@
     {% include 'confirmation_modal.html' with modal_id='deleteQuestionnaireModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function deleteQuestionnaireModalAction(dataId) {
-            $.ajax({
-                type: "POST",
-                url: "{% url 'staff:questionnaire_delete' %}",
-                data: {"questionnaire_id": dataId},
-                success: function(){ $('#questionnaire-row-'+dataId).hide('slow', function(){ $('#questionnaire-row-'+dataId).remove(); }); },
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); }
-            });
+            fetch("{% url 'staff:questionnaire_delete' %}", {
+                body: new URLSearchParams({questionnaire_id: dataId}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                fadeOutThenRemove(document.querySelector('#questionnaire-row-'+dataId));
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
     </script>
 {% endblock %}
@@ -80,33 +81,33 @@
 
     <script type="text/javascript">
         function changeVisibility(element) {
-            const questionnaire = element.parents(".questionnaire");
-            const visibility = element.data("visibility");
-            $.ajax({
-                type: "POST",
-                url: "{% url 'staff:questionnaire_visibility' %}",
-                data: {"questionnaire_id": questionnaire.data("id"), "visibility": visibility},
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); },
-                success: function(){
-                    questionnaire.find(`button[data-visibility]`).removeClass("active");
-                    questionnaire.find(`button[data-visibility="${visibility}"]`).addClass("active");
-                }
-            });
+            const questionnaire = element.closest(".questionnaire");
+            const visibility = element.dataset.visibility;
+
+            fetch("{% url 'staff:questionnaire_visibility' %}", {
+                body: new URLSearchParams({questionnaire_id: questionnaire.dataset.id, visibility}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                questionnaire.querySelectorAll(`button[data-visibility]`).forEach(button => {button.classList.remove("active");});
+                questionnaire.querySelectorAll(`button[data-visibility="${visibility}"]`).forEach(button => {button.classList.add("active");});
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         }
 
         function changeLocked(element) {
-            const questionnaire = element.parents(".questionnaire");
-            const is_locked = element.data("is-locked");
-            $.ajax({
-                type: "POST",
-                url: "{% url 'staff:questionnaire_set_locked' %}",
-                data: {"questionnaire_id": questionnaire.data("id"), "is_locked": is_locked},
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); },
-                success: function(){
-                    questionnaire.find(`button[data-is-locked]`).removeClass("active");
-                    questionnaire.find(`button[data-is-locked="${is_locked}"]`).addClass("active");
-                }
-            });
+            const questionnaire = element.closest(".questionnaire");
+            const is_locked = element.dataset.isLocked;
+
+            fetch("{% url 'staff:questionnaire_set_locked' %}", {
+                body: new URLSearchParams({questionnaire_id: questionnaire.dataset.id, is_locked}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                questionnaire.querySelectorAll(`button[data-is-locked]`).forEach(button => {button.classList.remove("active");});
+                questionnaire.querySelectorAll(`button[data-is-locked="${is_locked}"]`).forEach(button => {button.classList.add("active");});
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         }
     </script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_questionnaire_index_list.html b/evap/staff/templates/staff_questionnaire_index_list.html
index b126a5bc69..c4f0331e3b 100644
--- a/evap/staff/templates/staff_questionnaire_index_list.html
+++ b/evap/staff/templates/staff_questionnaire_index_list.html
@@ -34,16 +34,16 @@
                             <td>
                                 {% if type != 'contributor' %}
                                     <div class="btn-switch btn-group icon-buttons">
-                                        <button data-is-locked="0" type="button" onclick="changeLocked($(this));" class="btn btn-sm btn-light{% if questionnaire.is_locked == False %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Allow editors to change the selection of this questionnaire' %}"><span class="fas fa-fw fa-lock-open" aria-hidden="true"></span></button>
-                                        <button data-is-locked="1" type="button" onclick="changeLocked($(this));" class="btn btn-sm btn-light{% if questionnaire.is_locked == True %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Prevent editors from changing the selection of this questionnaire' %}"><span class="fas fa-fw fa-lock" aria-hidden="true"></span></button>
+                                        <button data-is-locked="0" type="button" onclick="changeLocked(this);" class="btn btn-sm btn-light{% if questionnaire.is_locked == False %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Allow editors to change the selection of this questionnaire' %}"><span class="fas fa-fw fa-lock-open" aria-hidden="true"></span></button>
+                                        <button data-is-locked="1" type="button" onclick="changeLocked(this);" class="btn btn-sm btn-light{% if questionnaire.is_locked == True %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Prevent editors from changing the selection of this questionnaire' %}"><span class="fas fa-fw fa-lock" aria-hidden="true"></span></button>
                                     </div>
                                 {% endif %}
                             </td>
                             <td>
                                 <div class="btn-group icon-buttons">
-                                    <button data-visibility="0" type="button" onclick="changeVisibility($(this));" class="btn btn-sm btn-light{% if questionnaire.visibility == 0 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% blocktrans %}Hide in lists{% endblocktrans %}"><span class="fas fa-fw fa-eye-slash" aria-hidden="true"></span></button>
-                                    <button data-visibility="1" type="button" onclick="changeVisibility($(this));" class="btn btn-sm btn-light{% if questionnaire.visibility == 1 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Show only for managers' %}"><span class="fas fa-fw fa-briefcase" aria-hidden="true"></span></button>
-                                    <button data-visibility="2" type="button" onclick="changeVisibility($(this));" class="btn btn-sm btn-light{% if questionnaire.visibility == 2 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Show for managers and editors' %}"><span class="fas fa-fw fa-person-chalkboard" aria-hidden="true"></span></button>
+                                    <button data-visibility="0" type="button" onclick="changeVisibility(this);" class="btn btn-sm btn-light{% if questionnaire.visibility == 0 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% blocktrans %}Hide in lists{% endblocktrans %}"><span class="fas fa-fw fa-eye-slash" aria-hidden="true"></span></button>
+                                    <button data-visibility="1" type="button" onclick="changeVisibility(this);" class="btn btn-sm btn-light{% if questionnaire.visibility == 1 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Show only for managers' %}"><span class="fas fa-fw fa-briefcase" aria-hidden="true"></span></button>
+                                    <button data-visibility="2" type="button" onclick="changeVisibility(this);" class="btn btn-sm btn-light{% if questionnaire.visibility == 2 %} active{% endif %}" data-bs-toggle="tooltip" data-bs-placement="top" title="{% trans 'Show for managers and editors' %}"><span class="fas fa-fw fa-person-chalkboard" aria-hidden="true"></span></button>
                                 </div>
                             </td>
                             <td class="text-end">
diff --git a/evap/staff/templates/staff_semester_import.html b/evap/staff/templates/staff_semester_import.html
index 3bd4c1e861..c1d3b4ed27 100644
--- a/evap/staff/templates/staff_semester_import.html
+++ b/evap/staff/templates/staff_semester_import.html
@@ -49,11 +49,14 @@ <h3>{% trans 'Import semester data' %}</h3>
     {% include 'confirmation_modal.html' with modal_id='importSemesterModal' title=title question=question action_text=action_text btn_type='primary' %}
     <script type="text/javascript">
         function importSemesterModalAction(dataId) {
-            var input = $("<input>")
-               .attr("type", "hidden")
-               .attr("name", "operation").val(dataId);
-            $('#semester-import-form').append(input);
-            $('#semester-import-form').submit();
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = "operation";
+            input.value = dataId;
+
+            const form = document.getElementById("semester-import-form");
+            form.appendChild(input);
+            form.requestSubmit();
         };
     </script>
 
diff --git a/evap/staff/templates/staff_semester_preparation_reminder.html b/evap/staff/templates/staff_semester_preparation_reminder.html
index ace9e6b6b8..053ec93032 100644
--- a/evap/staff/templates/staff_semester_preparation_reminder.html
+++ b/evap/staff/templates/staff_semester_preparation_reminder.html
@@ -78,20 +78,17 @@
     {% include 'confirmation_modal.html' with modal_id='remindAllModal' title=title question=question action_text=action_text btn_type='primary' %}
     <script type="text/javascript">
         function remindAllModalAction() {
-            var remindAllButton = $('#remindAllButton');
-            remindAllButton.prop('disabled', true);
-            remindAllButton.text('{% trans 'Reminding everyone' %}');
+            const remindAllButton = document.getElementById('remindAllButton');
+            remindAllButton.disabled = true;
+            remindAllButton.innerText = "{% trans 'Reminding everyone' %}";
 
-            $.ajax({
-                type: "POST",
-                url: "{% url 'staff:semester_preparation_reminder' semester_id=semester.id %}",
-                success: function(){
-                    location.reload();
-                },
-                error: function(){
-                    window.alert("{% trans 'The server is not responding.' %}");
-                }
-            })
+            fetch("{% url 'staff:semester_preparation_reminder' semester_id=semester.id %}", {
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                location.reload();
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         }
     </script>
 {% endblock %}
diff --git a/evap/staff/templates/staff_semester_view.html b/evap/staff/templates/staff_semester_view.html
index 444ecfd470..f586e5f83f 100644
--- a/evap/staff/templates/staff_semester_view.html
+++ b/evap/staff/templates/staff_semester_view.html
@@ -305,11 +305,12 @@ <h3>
                     {% if request.user.is_manager and not semester.participations_are_archived %}
                         <div class="my-2">
                             <button type="button" class="btn btn-sm btn-secondary"
-                                onclick="$('#evaluation_operation_form td').prev().find(':checkbox').prop('checked', true);">
+                                onclick="document.querySelectorAll('#evaluation_operation_form input[type=checkbox][name=evaluation]').forEach(c => {c.checked = true;})">
                                 {% trans 'Select all' %}
                             </button>
                             <button type="button" class="btn btn-sm btn-secondary"
-                                onclick="$('#evaluation_operation_form :checkbox').prop('checked', false);">{% trans 'Select none' %}
+                                onclick="document.querySelectorAll('#evaluation_operation_form input[type=checkbox][name=evaluation]').forEach(c => {c.checked = false;})">
+                                {% trans 'Select none' %}
                             </button>
                         </div>
                         <div>
@@ -449,16 +450,18 @@ <h3>
     {% include 'confirmation_modal.html' with modal_id='makeActiveSemesterModal' title=title question=question action_text=action_text btn_type='primary' %}
     <script type="text/javascript">
         function makeActiveSemesterModalAction(dataId) {
-            var makeActiveSemesterButton = $('#makeActiveSemesterButton');
-            makeActiveSemesterButton.prop('disabled', true);
-            makeActiveSemesterButton.text("{% trans 'Activating...' %}");
-            $.ajax({
-                type: "POST",
-                url: "{% url 'staff:semester_make_active' %}",
-                data: {"semester_id": dataId},
-                success: function() { location.reload(); },
-                error: function() { window.alert("{% trans 'The server is not responding.' %}") },
-            })
+            const makeActiveSemesterButton = document.getElementById('makeActiveSemesterButton');
+            makeActiveSemesterButton.disabled = true;
+            makeActiveSemesterButton.textContent = "{% trans 'Activating...' %}";
+
+            fetch("{% url 'staff:semester_make_active' %}", {
+                body: new URLSearchParams({semester_id: dataId}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                location.reload();
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         }
     </script>
     {% trans 'Delete semester' as title %}
@@ -467,16 +470,18 @@ <h3>
     {% include 'confirmation_text_modal.html' with modal_id='deleteSemesterModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function deleteSemesterModalAction(dataId) {
-            var deleteButton = $('#deleteSemesterButton');
-            deleteButton.prop('disabled', true);
-            deleteButton.text("{% trans 'Deleting...' %}");
-            $.ajax({
-                type: "POST",
-                url: "{% url 'staff:semester_delete' %}",
-                data: {"semester_id": dataId},
-                success: function(){ location.replace("{% url 'staff:index' %}"); },
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); }
-            });
+            const deleteButton = document.getElementById('deleteSemesterButton');
+            deleteButton.disabled = true;
+            deleteButton.textContent = "{% trans 'Deleting...' %}";
+
+            fetch("{% url 'staff:semester_delete' %}", {
+                body: new URLSearchParams({semester_id: dataId}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                location.replace("{% url 'staff:index' %}");
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
     </script>
     {% trans 'Archive participations' as title %}
@@ -485,13 +490,14 @@ <h3>
     {% include 'confirmation_modal.html' with modal_id='archiveParticipationsModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function archiveParticipationsModalAction(dataId) {
-            $.ajax({
-                type: "POST",
-                url: "{% url 'staff:semester_archive_participations' %}",
-                data: {"semester_id": dataId},
-                success: function(){ location.reload(); },
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); }
-            });
+            fetch("{% url 'staff:semester_archive_participations' %}", {
+                body: new URLSearchParams({semester_id: dataId}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                location.reload();
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
     </script>
     {% trans 'Delete grade documents' as title %}
@@ -500,13 +506,14 @@ <h3>
     {% include 'confirmation_modal.html' with modal_id='deleteGradeDocumentsModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function deleteGradeDocumentsModalAction(dataId) {
-            $.ajax({
-                type: "POST",
-                url: "{% url 'staff:semester_delete_grade_documents' %}",
-                data: {"semester_id": dataId},
-                success: function(){ location.reload(); },
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); }
-            });
+            fetch("{% url 'staff:semester_delete_grade_documents' %}", {
+                body: new URLSearchParams({semester_id: dataId}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                location.reload();
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
     </script>
     {% trans 'Archive results' as title %}
@@ -515,13 +522,14 @@ <h3>
     {% include 'confirmation_modal.html' with modal_id='archiveResultsModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function archiveResultsModalAction(dataId) {
-            $.ajax({
-                type: "POST",
-                url: "{% url 'staff:semester_archive_results' %}",
-                data: {"semester_id": dataId},
-                success: function(){ location.reload(); },
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); }
-            });
+            fetch("{% url 'staff:semester_archive_results' %}", {
+                body: new URLSearchParams({semester_id: dataId}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                location.reload();
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
     </script>
     {% trans 'Delete evaluation' as title %}
@@ -530,13 +538,14 @@ <h3>
     {% include 'confirmation_modal.html' with modal_id='deleteEvaluationModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function deleteEvaluationModalAction(dataId) {
-            $.ajax({
-                type: "POST",
-                url: "{% url 'staff:evaluation_delete' %}",
-                data: {"evaluation_id": dataId},
-                success: function(){ $('#evaluation-row-'+dataId).hide('slow', function(){ $('#evaluation-row-'+dataId).remove(); }); },
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); }
-            });
+            fetch("{% url 'staff:evaluation_delete' %}", {
+                body: new URLSearchParams({evaluation_id: dataId}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                fadeOutThenRemove(document.getElementById('evaluation-row-'+dataId))
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
     </script>
     {% trans 'Delete course' as title %}
@@ -545,13 +554,14 @@ <h3>
     {% include 'confirmation_modal.html' with modal_id='deleteCourseModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function deleteCourseModalAction(dataId) {
-            $.ajax({
-                type: "POST",
-                url: "{% url 'staff:course_delete' %}",
-                data: {"course_id": dataId},
-                success: function(){ $('#course-row-'+dataId).hide('slow', function(){ $('#course-row-'+dataId).remove(); }); },
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); }
-            });
+            fetch("{% url 'staff:course_delete' %}", {
+                body: new URLSearchParams({course_id: dataId}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                fadeOutThenRemove(document.getElementById('#course-row-'+dataId))
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
         };
     </script>
     {% trans 'Activate reward points' as title %}
@@ -567,15 +577,6 @@ <h3>
 
 {% block additional_javascript %}
     <script type="text/javascript">
-        $('.btn-toggle').click(function() {
-            $(this).find('.btn').toggleClass('active');
-
-            if ($(this).find('.btn-primary').size()>0) {
-                $(this).find('.btn').toggleClass('btn-primary');
-            }
-            $(this).find('.btn').toggleClass('btn-secondary');
-        });
-
         var overviewCard = document.getElementById('overviewCard');
         var overviewCardCollapse = new bootstrap.Collapse(overviewCard, {
             toggle: localStorage['show_overview'] === 'true'
@@ -596,8 +597,8 @@ <h3>
             localStorage['selected_tab'] = tab;
         }
 
-        $(window).bind("pageshow", function () {
-            $('#evaluation_operation_form :checkbox').prop('checked', false); // prevent wrong autofills
+        window.addEventListener("pageshow", () => {
+            document.querySelectorAll('#evaluation_operation_form input[type=checkbox]').forEach(checkbox => {checkbox.checked = false;}); // prevent wrong autofills
         });
     </script>
     <script type="module">
diff --git a/evap/staff/templates/staff_text_answer_warnings.html b/evap/staff/templates/staff_text_answer_warnings.html
index 7ba6c30b77..a517a0bfee 100644
--- a/evap/staff/templates/staff_text_answer_warnings.html
+++ b/evap/staff/templates/staff_text_answer_warnings.html
@@ -100,7 +100,7 @@
     <script type="module">
         import {initTextAnswerWarnings} from "{% static 'js/text-answer-warnings.js' %}";
 
-        initTextAnswerWarnings([document.querySelector("#preview-textarea")], JSON.parse($("#text-answer-warnings").text()));
+        initTextAnswerWarnings([document.querySelector("#preview-textarea")], JSON.parse(document.getElementById("text-answer-warnings").textContent));
 
         const rowChanged = function(row) {
             const triggerStrings = row.find("select[id$=-trigger_strings]").val();
diff --git a/evap/staff/templates/staff_user_form.html b/evap/staff/templates/staff_user_form.html
index 154368f5ac..45ad0cb2af 100644
--- a/evap/staff/templates/staff_user_form.html
+++ b/evap/staff/templates/staff_user_form.html
@@ -115,14 +115,15 @@ <h5 class="card-title me-auto">{% trans 'Export evaluation results' %}</h5>
     {% include 'confirmation_modal.html' with modal_id='deleteModal' title=title question=question action_text=action_text btn_type='danger' %}
     <script type="text/javascript">
         function deleteModalAction(dataId) {
-            $.ajax({
-                type: "POST",
-                url: "{% url 'staff:user_delete' %}",
-                data: {"user_id": dataId},
-                success: function(){window.location="{% url 'staff:user_index' %}"},
-                error: function(){ window.alert("{% trans 'The server is not responding.' %}"); }
-            });
-        };
+            fetch("{% url 'staff:user_delete' %}", {
+                body: new URLSearchParams({user_id: dataId}),
+                headers: CSRF_HEADERS,
+                method: "POST",
+            }).then(response => {
+                assert(response.ok);
+                window.location="{% url 'staff:user_index' %}"
+            }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
+        }
     </script>
     {% if form.instance.id %}
         {% trans 'Send notification email' as title %}
@@ -131,13 +132,14 @@ <h5 class="card-title me-auto">{% trans 'Export evaluation results' %}</h5>
         {% include 'confirmation_modal.html' with modal_id='resendEmailModal' title=title question=question action_text=action_text btn_type='success' %}
         <script type="text/javascript">
             function resendEmailModalAction(dataId) {
-                $.ajax({
-                    type: "POST",
-                    url: "{% url 'staff:user_resend_email' %}",
-                    data: {"user_id": dataId},
-                    success: function(){window.location="{% url 'staff:user_edit' user_id %}"},
-                    error: function(){ window.alert("{% trans 'The server is not responding.' %}"); }
-                });
+                fetch("{% url 'staff:user_resend_email' %}", {
+                    body: new URLSearchParams({user_id: dataId}),
+                    headers: CSRF_HEADERS,
+                    method: "POST",
+                }).then(response => {
+                    assert(response.ok);
+                    window.location="{% url 'staff:user_edit' user_id %}"
+                }).catch(error => {window.alert("{% trans 'The server is not responding.' %}");});
             };
         </script>
     {% endif %}
diff --git a/evap/staff/templates/staff_user_import.html b/evap/staff/templates/staff_user_import.html
index 6e5d8d5783..b316052145 100644
--- a/evap/staff/templates/staff_user_import.html
+++ b/evap/staff/templates/staff_user_import.html
@@ -48,11 +48,14 @@ <h3>{% trans 'Import users' %}</h3>
     {% include 'confirmation_modal.html' with modal_id='importUserModal' title=title question=question action_text=action_text btn_type='primary' %}
     <script type="text/javascript">
         function importUserModalAction(dataId) {
-            var input = $("<input>")
-               .attr("type", "hidden")
-               .attr("name", "operation").val(dataId);
-            $('#user-import-form').append(input);
-            $('#user-import-form').submit();
+            const input = document.createElement("input");
+            input.type = "hidden";
+            input.name = "operation";
+            input.value = dataId;
+
+            const form = document.getElementById("user-import-form");
+            form.appendChild(input);
+            form.requestSubmit();
         };
     </script>
 
diff --git a/evap/static/ts/src/csrf-utils.ts b/evap/static/ts/src/csrf-utils.ts
index f95e803205..82c618c62b 100644
--- a/evap/static/ts/src/csrf-utils.ts
+++ b/evap/static/ts/src/csrf-utils.ts
@@ -14,22 +14,9 @@ function getCookie(name: string): string | null {
 const csrftoken = getCookie("csrftoken")!;
 export const CSRF_HEADERS = { "X-CSRFToken": csrftoken };
 
-function isMethodCsrfSafe(method: string): boolean {
-    // these HTTP methods do not require CSRF protection
-    return ["GET", "HEAD", "OPTIONS", "TRACE"].includes(method);
-}
-
-// setup ajax sending csrf token
-$.ajaxSetup({
-    beforeSend: function (xhr: JQuery.jqXHR, settings: JQuery.AjaxSettings) {
-        const isMethodSafe = settings.method && isMethodCsrfSafe(settings.method);
-        if (!isMethodSafe && !this.crossDomain) {
-            xhr.setRequestHeader("X-CSRFToken", csrftoken);
-        }
-    },
-});
+// TODO
+(globalThis as any).CSRF_HEADERS = CSRF_HEADERS;
 
 export const testable = {
     getCookie,
-    isMethodCsrfSafe,
 };
diff --git a/evap/static/ts/src/utils.ts b/evap/static/ts/src/utils.ts
index 533d08d137..ecaaae5917 100644
--- a/evap/static/ts/src/utils.ts
+++ b/evap/static/ts/src/utils.ts
@@ -39,3 +39,15 @@ export const findPreviousElementSibling = (element: Element, selector: string):
 };
 
 export const isVisible = (element: HTMLElement): boolean => element.offsetWidth !== 0 || element.offsetHeight !== 0;
+
+export const fadeOutThenRemove = (element: HTMLElement) => {
+    element.style.transition = "opacity 600ms";
+    element.style.opacity = "0";
+    setTimeout(() => {
+        element.remove();
+    }, 600);
+};
+
+// TODO: How to handle exporting / importing
+(globalThis as any).assert = assert;
+(globalThis as any).fadeOutThenRemove = fadeOutThenRemove;
diff --git a/evap/static/ts/tests/unit/csrf-utils.ts b/evap/static/ts/tests/unit/csrf-utils.ts
index 6e5085c40f..7ed01095f3 100644
--- a/evap/static/ts/tests/unit/csrf-utils.ts
+++ b/evap/static/ts/tests/unit/csrf-utils.ts
@@ -10,12 +10,9 @@ Object.defineProperty(document, "cookie", {
         `baz=${encodeURIComponent("+{`")}`,
 });
 
-// @ts-ignore
-window.$ = require("../../../js/jquery-2.1.3.min");
-
 import { testable } from "src/csrf-utils";
 
-const { getCookie, isMethodCsrfSafe } = testable;
+const { getCookie } = testable;
 
 test("parse cookie", () => {
     expect(getCookie("foo")).toBe("F00");
@@ -24,24 +21,3 @@ test("parse cookie", () => {
     expect(getCookie("csrftoken")).toBe("token");
     expect(getCookie("qux")).toBe(null);
 });
-
-test.each(["GET", "HEAD", "OPTIONS", "TRACE"])("method %s is considered safe", method => {
-    expect(isMethodCsrfSafe(method)).toBe(true);
-});
-
-test.each(["POST", "PUT", "DELETE"])("method %s is considered unsafe", method => {
-    expect(isMethodCsrfSafe(method)).toBe(false);
-});
-
-test("send csrf token in request", () => {
-    const mock = {
-        open: jest.fn(),
-        send: jest.fn(),
-        setRequestHeader: jest.fn(),
-    };
-    window.XMLHttpRequest = jest.fn(() => mock) as unknown as typeof window.XMLHttpRequest;
-
-    $.post("/receiver");
-
-    expect(mock.setRequestHeader).toBeCalledWith("X-CSRFToken", "token");
-});
diff --git a/evap/student/templates/student_vote.html b/evap/student/templates/student_vote.html
index 681bc8a458..e5afa86763 100644
--- a/evap/student/templates/student_vote.html
+++ b/evap/student/templates/student_vote.html
@@ -206,7 +206,7 @@ <h3 class="mb-3">{{ evaluation.full_name }} ({{ evaluation.course.semester.name
 
             function updateLastSavedLabel() {
                 const timeNow = new Date();
-                const lastSavedLabel = $('#last-saved');
+                const lastSavedLabel = document.getElementById('last-saved');
                 if (localStorage.getItem(lastSavedStorageKey) !== null) {
                     const lastSavedDate = new Date(localStorage.getItem(lastSavedStorageKey));
                     const delta = Math.round((timeNow - lastSavedDate) / 1000);
@@ -232,9 +232,9 @@ <h3 class="mb-3">{{ evaluation.full_name }} ({{ evaluation.course.semester.name
                         + padWithLeadingZeros(lastSavedDate.getHours()) + ":"
                         + padWithLeadingZeros(lastSavedDate.getMinutes());
                     }
-                    lastSavedLabel.text("{% trans 'Last saved locally' %}: " + timeStamp);
+                    lastSavedLabel.innerText = "{% trans 'Last saved locally' %}: " + timeStamp;
                 } else {
-                    lastSavedLabel.text("{% trans 'Could not save your information locally' %}");
+                    lastSavedLabel.innerText = "{% trans 'Could not save your information locally' %}";
                 }
             }
 
@@ -250,50 +250,41 @@ <h3 class="mb-3">{{ evaluation.full_name }} ({{ evaluation.course.semester.name
             updateLastSavedLabel();
             setInterval(updateLastSavedLabel, 1000);
 
-            initTextAnswerWarnings(document.querySelectorAll("#student-vote-form textarea"), JSON.parse($("#text-answer-warnings").text()));
+            initTextAnswerWarnings(document.querySelectorAll("#student-vote-form textarea"), JSON.parse(document.getElementById("text-answer-warnings").textContent));
 
-            var form = $('#student-vote-form');
-
-            // Taken from http://stackoverflow.com/questions/9177252/detecting-a-redirect-in-jquery-ajax
-            // This hacks jQuery to give us this xhr object which is used below
-            var xhr;
-            var _orgAjax = jQuery.ajaxSettings.xhr;
-            jQuery.ajaxSettings.xhr = function () {
-              xhr = _orgAjax();
-              return xhr;
-            };
-
-            form.submit(function (event) {
+            const form = document.getElementById('student-vote-form');
+            const submitListener = (event) => {
                 event.preventDefault(); // don't use the default submission
-                var submitButton = $('#vote-submit-btn');
-                var originalText = submitButton.text();
-
-                submitButton.text("{% trans 'Submitting...' %}");
-                submitButton.prop('disabled', true);
-
-                $.ajax({
-                    type: form.attr('method'),
-                    url: form.attr('action'),
-                    data: form.serialize(),
-                    success: function (data, s, req) {
-                        if(data === "{{ success_magic_string }}") {
-                            sisyphus.manuallyReleaseData();
-                            window.location.replace("{{ success_redirect_url }}");
-                        } else {
-                            // resubmit without this handler to show the site with the form errors
-                            form.unbind("submit");
-                            form.submit();
-                        }
-                    },
-                    error: function(data) {
-                        // show a warning if the post isn't successful
-                        document.getElementById('submit-error-warning').style.display = 'block';
-                        submitButton.text(originalText);
-                        submitButton.prop('disabled', false);
+                const submitButton = document.getElementById('vote-submit-btn');
+                const originalText = submitButton.innerText;
+
+                submitButton.innerText = "{% trans 'Submitting...' %}";
+                submitButton.disabled = true;
+
+                fetch(form.action, {
+                    body: new FormData(form),
+                    headers: CSRF_HEADERS,
+                    method: form.method,
+                }).then(response => {
+                    assert(response.ok);
+                    return response.text();
+                }).then(response_text => {
+                    if(response_text === "{{ success_magic_string }}") {
+                        sisyphus.manuallyReleaseData();
+                        window.location.replace("{{ success_redirect_url }}");
+                    } else {
+                        // resubmit without this handler to show the site with the form errors
+                        form.removeEventListener("submit", submitListener);
+                        form.requestSubmit();
                     }
+                }).catch(error => {
+                    // show a warning if the post isn't successful
+                    document.getElementById('submit-error-warning').style.display = 'block';
+                    submitButton.innerText = originalText;
+                    submitButton.disabled = false;
                 });
-                return false;
-            });
+            };
+            form.addEventListener("submit", submitListener);
 
             function clearChoiceError(voteButton) {
                 voteButton.closest(".row").querySelectorAll(".choice-error").forEach(highlightedElement => {