HDX-10024 disable submit button if fields are empty

OCHA-DAP · Aug 2, 2024 · 1ec8350 · 1ec8350
1 parent 0575340
commit 1ec8350
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/landing_pages/hdx_signals.js b/ckanext-hdx_theme/ckanext/hdx_theme/fanstatic/landing_pages/hdx_signals.js
@@ -1,6 +1,8 @@
 $(document).ready(function () {
-  var $form = $('#mc_embed_signup form');
+
+  var $form = $('#signals-form-card form');
   var $button = $form.find('#mc-embedded-subscribe');
+  var $fields = $form.find('#mce-EMAIL, #mce-FNAME, #mce-ORG');
 
   var DATASETS_GROUPS = [
     '[4389]'
@@ -105,7 +107,11 @@ $(document).ready(function () {
       return $form.find('input[name^="group' + group + '"]:checked').length > 0;
     });
 
-    if(dataset_checked && location_checked) {
+    var fields_filled = $fields.toArray().every(function(field) {
+      return $(field).val().trim() !== '';
+    });
+
+    if(dataset_checked && location_checked && fields_filled) {
       $button.removeClass('disabled').removeAttr('disabled');
     }
     else {
@@ -142,4 +148,9 @@ $(document).ready(function () {
       disable_submit_button();
     });
   });
+
+  $fields.on('input', function() {
+    disable_submit_button();
+  });
+
 });
diff --git a/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html b/ckanext-hdx_theme/ckanext/hdx_theme/templates/landing_pages/signals.html
@@ -30,7 +30,7 @@
         </div>
         <div class="row">
           <div class="col-12">
-            <div class="bem-card card my-3">
+            <div class="bem-card card my-3" id="signals-form-card">
               <div class="card-body bem-card__body">
                 <div class="row">
                   <div class="col-12 col-md-10 col-lg-8 mx-auto">
@@ -353,9 +353,10 @@
                               <input type="text" name="b_ea3f905d50ea939780139789d_e908cb9d48" tabindex="-1" value="">
                             </div>
                             <div class="clear text-center mb-3">
-                              <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"
-                                     data-module="hdx_click_stopper" data-module-link_type="signals sign up"
-                                     data-module-just_send_event="true" data-module-label="Subscribe" value="Subscribe">
+                              <input type="submit" name="subscribe" id="mc-embedded-subscribe"
+                                     class="btn btn-primary disabled" disabled data-module="hdx_click_stopper"
+                                     data-module-link_type="signals sign up" data-module-just_send_event="true"
+                                     data-module-label="Subscribe" value="Subscribe">
                             </div>
                           </div>
                         </form>