jquery code to manipulate the engagement event form

1 files changed, 28 insertions, 2 deletions

diff --git a/ctrack/register/templates/register/engagementevent_form.html b/ctrack/register/templates/register/engagementevent_form.html
index 3aae8c1..afa053f 100644
--- a/ctrack/register/templates/register/engagementevent_form.html
+++ b/ctrack/register/templates/register/engagementevent_form.html
@@ -7,6 +7,27 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
+
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+  <script>
+    $(document).ready(function () {
+
+      $("#id_type").change(function () {
+        var selected = $("#id_type option:selected").text();
+        console.log(selected)
+        if (selected == "CAF - Initial Submission") {
+          console.log("Yes ya bass!");
+          $("#caf_alert").removeAttr('hidden');
+          $("#div_id_related_caf").addClass("border rounded p-3 border-danger");
+        } else {
+          $("#caf_alert").prop("hidden", true);
+          $("#div_id_related_caf").removeClass("border rounded p-3 border-danger");
+        }
+      });
+    });
+  </script>
+
+
   <div class="container mt-3">
     <div class="row">
       <div class="col-md-12 pl-0 my-2">
@@ -15,11 +36,15 @@
     </div>
     <div class="row">
       <div class="col-md-12 pl-0 my-2">
-       <h5 class="text-secondary">{{ org.name }}</h5>
+        <h5 class="text-secondary">{{ org.name }}</h5>
       </div>
     </div>
     <div class="row">
       <div class="col-md-7 pt-2 border bg-light">
+        <div hidden id="caf_alert" class="alert alert-info" role="alert">
+          If selecting a CAF type here, you must select the CAF this event applies to in
+          the "Related CAFs" field below.
+        </div>
         {% crispy form %}
       </div>
       <div class="col-sm-5">
@@ -27,7 +52,8 @@
           <div class="card-body">
             <h5 class="card-title">Help on Engagement Events</h5>
             <p class="card-text">All key events in the compliance lifecycle need to be registered.</p>
-            <p class="card-text">Events can be <em>singular</em> (such as an email) or <em>periodic</em> (such as a CAF analysis period).</p>
+            <p class="card-text">Events can be <em>singular</em> (such as an email) or <em>periodic</em> (such as a CAF
+              analysis period).</p>
             <p class="card-text">All events should be registered here.</p>
             <a href="#" class="btn btn-primary">Go somewhere</a>
           </div>