Added code to dynamically update the qualifiers from the Qualtrics database

insertQualifiers.js

@@ -0,0 +1,94 @@
+
+function insertQualifiers(){
+    //alert("qualifying....");
+
+    surveyId = document.getElementById("surveyId").value;
+    if (/^SV_[a-zA-Z0-9]+$/.test(surveyId)) {
+        console.log("Valid: starts with SV_ and followed by letters/numbers only");
+        console.log(surveyId);
+    } else {
+        console.log("Invalid: must start with SV_ and be followed by only letters or numbers");
+        alert("Invalid survey ID");
+        return;
+    }
+
+
+  // Create the form data object
+  const formData = new FormData();
+  formData.append('surveyId', surveyId);
+
+  // Send the form data using fetch
+  fetch('get_qualifiers.php', {
+    method: 'POST',
+    body: formData
+  })
+  .then(response => response.text())
+  .then(data => {
+    // Output result
+    console.log(data);
+    const parsed = JSON.parse(data);
+    console.log (parsed["1"]);
+    document.querySelector('label[for="location"]').textContent = parsed["1"][0];
+
+    //  .shift(); //
+    parsed["1"][0] = "Any";
+    select = document.getElementById('location');
+    optionCount = select.options.length;
+    if (optionCount > 1) {return;}
+    select.innerHTML = '';  // removes all option elements inside
+
+    parsed["1"].forEach((loc, index) => {
+        const option = document.createElement("option");
+        option.value = index;
+        option.textContent = loc;
+        select.appendChild(option);
+    });
+
+    document.querySelector('label[for="level"]').textContent = "New question 2";
+
+    //  .shift(); //
+    parsed["2"][0] = "Any";
+    select = document.getElementById('level');
+    optionCount = select.options.length;
+    if (optionCount > 1) {return;}
+    select.innerHTML = '';  // removes all option elements inside
+
+    parsed["2"].forEach((loc, index) => {
+        const option = document.createElement("option");
+        option.value = index;
+        option.textContent = loc;
+        select.appendChild(option);
+    });
+
+    document.querySelector('label[for="gov"]').textContent = "New question 3";
+    parsed["3"][0] = "Any";
+    select = document.getElementById('gov');
+    optionCount = select.options.length;
+    if (optionCount > 1) {return;}
+    select.innerHTML = '';  // removes all option elements inside
+
+    parsed["3"].forEach((loc, index) => {
+        const option = document.createElement("option");
+        option.value = index;
+        option.textContent = loc;
+        select.appendChild(option);
+    });
+
+
+
+    /*document.getElementById("record_no").textContent = total;
+    if (total < 9){
+      return;
+    }*/
+    // return data; // Should be an array like [{ value: -3, count: 2 }, ..., { value: 3, count: 5 }]
+
+  })
+  .catch(error => {
+    console.error('Error:', error);
+  });
+}
+
+
+
+
+

reportTemplate.html

@@ -9,6 +9,7 @@
   <script src="./drawbar.js"></script>
   <script src="./savesvg.js"></script>
   <script src="./populateGraphics.js"></script>
+  <script src="./insertQualifiers.js"></script>
 
  <style>
     body {
@@ -92,34 +93,24 @@
   <label for="surveyId">Survey iD</label>
   <input type="text" id="surveyId" name="surveyId" />
   <br>
-  <button type="button" onclick="getSurveyData()">Submit</button>
-</form>
 
-<br>
-<div style="visibility: hidden" id="groupings">
-<form>
-  <label for="location">Where do you work in the organisation?:</label>
+  <label for="location">Where do you work in the organisation?:</label><br>
   <select id="location" name="location">
     <option value="0">Any</option>
-    <option value="1">Site 1</option>
-    <option value="2">Site 2</option>
   </select>
   <br>
-  <label for="level">Where operational level do you work at in the organisation?:</label>
+  <label for="level">Where operational level do you work at in the organisation?:</label><br>
   <select id="level" name="level">
     <option value="0">Any</option>
-    <option value="1">Role 1</option>
-    <option value="2">Role 2</option>
   </select>
   <br>
-  <label for="gov">Have you ever held one of the following roles in our business?:</label>
+  <label for="gov">Have you ever held one of the following roles in our business?:</label><br>
   <select id="gov" name="gov">
     <option value="0">Any</option>
-    <option value="1">Yes</option>
-    <option value="2">No</option>
   </select>
   <br>
-  <button type="button" onclick="getGroupAll()">Submit</button>
+  <br>
+  <button type="button" onclick="insertQualifiers(); getSurveyData();">Submit</button>
 </form>
 </div>