function to prevent form submit if no boxes checked > relates #52

public/js/force-checked.js

@@ -0,0 +1,20 @@
+// Script to make it compulsory to have at least one item ticked
+
+document.getElementById("submit-form").addEventListener("submit", forceChecked);
+
+function forceChecked(e){
+    var resourceOrSession = "";
+
+    if(document.getElementById("title-heading").textContent == "Background") {
+        resourceOrSession = "background"
+    } else {
+        resourceOrSession = "resource"
+    }
+
+    if (Object.keys(sessionStorage).toString().includes(resourceOrSession)){
+        return true;
+    } else {
+        e.preventDefault();
+        window.alert("Please select at least one item to receive your results")
+    }
+}

src/views/background.hbs

@@ -84,10 +84,11 @@
 </section>
 <section class='grid-row'>
   <div id='bottom-section' class='centered-column centered-content secondary-background thirtytwo-padding fixed-height-double-h1 bottom-padding-lft'>
-    <form action='/resources' class='centered-content'>
+    <form action='/resources' class='centered-content' id="submit-form">
       <button class="govuk-button">Get resources</button>
     </form>
   </div>
 </section>
 
-<script src='js/checkboxlocalstoragebackground.js'></script>
+<script src='js/checkboxlocalstoragebackground.js'></script>
+<script src='js/force-checked.js'></script>

src/views/partials/heading.hbs

@@ -1,5 +1,5 @@
 <nav class='grid-row'>
     <div class='centered-column centered-content secondary-background thirtytwo-padding fixed-height-double-h1 padding-lft'>
-      <h1>{{title}}</h1>
+      <h1 id="title-heading">{{title}}</h1>
     </div>
 </nav>

src/views/resources.hbs

@@ -42,10 +42,11 @@
 </section>
 <section class='grid-row'>
   <div id='bottom-section' class='centered-column centered-content secondary-background thirtytwo-padding fixed-height-double-h1 bottom-padding-lft'>
-    <form action='/more-info' class='centered-content'>
-      <button class="govuk-button">Next!</button>
+    <form action='/more-info' class='centered-content' id="submit-form">
+      <button class="govuk-button" >Next!</button>
     </form>
   </div>
 </section>
 
-<script src='js/checkboxlocalstorageresources.js'></script>
+<script src='js/checkboxlocalstorageresources.js'></script>
+<script src='js/force-checked.js'></script>