Fix inline JS (#3749)

This allows the form to be submitted. 

See #3748

Author: jmsmkn

app/grandchallenge/challenges/forms.py

@@ -193,16 +193,6 @@ class Meta:
         widgets = {
             "start_date": forms.TextInput(attrs={"type": "date"}),
             "end_date": forms.TextInput(attrs={"type": "date"}),
-            "long_term_commitment": forms.CheckboxInput(
-                attrs={
-                    "onchange": "updateExtraField('long_term_commitment', 'support this challenge long-term');"
-                }
-            ),
-            "data_license": forms.CheckboxInput(
-                attrs={
-                    "onchange": "updateExtraField('data_license', 'use a CC-BY license for your data');"
-                }
-            ),
             "expected_number_of_teams": forms.NumberInput(
                 attrs={"oninput": "validity.valid||(value='');"}
             ),

app/grandchallenge/challenges/static/js/challenges/challenge_request_dynamic_fields.js renamed to app/grandchallenge/challenges/static/js/challenges/challenge_request_dynamic_fields.mjs

@@ -17,7 +17,22 @@ function updateExtraField(fieldName, helpText) {
     }
 }
 
-$(document).ready(() => {
+document.addEventListener("DOMContentLoaded", () => {
+    const longTermCommitmentCheckbox = document.getElementById(
+        "id_long_term_commitment",
+    );
+    longTermCommitmentCheckbox.addEventListener("change", () => {
+        updateExtraField(
+            "long_term_commitment",
+            "support this challenge long-term",
+        );
+    });
+
+    const dataLicenseCheckbox = document.getElementById("id_data_license");
+    dataLicenseCheckbox.addEventListener("change", () => {
+        updateExtraField("data_license", "use a CC-BY license for your data");
+    });
+
     updateExtraField(
         "long_term_commitment",
         "support this challenge long-term",

app/grandchallenge/challenges/templates/challenges/challengerequest_form.html

@@ -21,6 +21,6 @@ <h2>Request a Challenge</h2>
 
 {% block script %}
     {{ block.super }}
-    <script type="text/javascript" src="{% static "js/challenges/challenge_request_dynamic_fields.js" type="module" defer %}"></script>
+    <script type="module" src="{% static "js/challenges/challenge_request_dynamic_fields.mjs" %}"></script>
     <script type="text/javascript" src="{% static "js/unsavedform.js" %}"></script>
 {% endblock %}