Merge pull request #202 from nhsuk/checkbox-fix

Add script to mark unchecked boxes

Author: chrimesdev

CHANGELOG.md

@@ -1,12 +1,16 @@
 # NHS.UK prototype kit Changelog
 
+## 4.6.4 - 25 August 2021
+
+- Add script to fix bug with unchecked checkboxes and separate bug when only one checkbox is selected.
+- Update package dependencies to latest versions
+
 ## 4.6.3 - 24 August 2021
 
 :wrench: **Fixes**
 
 - Use the correct name for the NHS digital service manual Slack instance
 - Fix GitHub actions/Azure DevOps release pipelines [Issue 180](https://github.com/nhsuk/nhsuk-prototype-kit/issues/180)
-
 ## 4.6.2 - 24 August 2021
 
 :wrench: **Fixes**

app/assets/javascript/auto-store-data.js

@@ -0,0 +1,24 @@
+// On form submit, add hidden inputs for checkboxes so the server knows if
+// they've been unchecked. This means we can automatically store and update
+// all form data on the server, including checkboxes that are checked, then
+// later unchecked
+const forms = document.querySelectorAll("form")
+
+for (let form of forms) {
+  form.addEventListener("submit", () => {
+    const checkboxes = form.querySelectorAll("input[type='checkbox']")
+    const names = {}
+
+    checkboxes.forEach(checkbox => {
+      if (!names[checkbox.name]) {
+        names[checkbox.name] = true
+
+        const input = document.createElement("input")
+        input.setAttribute("type", "hidden")
+        input.setAttribute("name", checkbox.name)
+        input.setAttribute("value", "_unchecked")
+        form.appendChild(input)
+      }
+    })
+  })
+}

app/views/includes/scripts.html

@@ -1,4 +1,7 @@
 <script src="/js/jquery-3.5.1.min.js"></script>
 <script src="/js/main.js"></script>
+{% if useAutoStoreData %}
+  <script src="/js/auto-store-data.js"></script>
+{% endif %}
 
 <!-- Add any custom scripts -->