Enable submit button on select

gip-inclusion · May 9, 2024 · 9a92d2d · 9a92d2d
1 parent 0138530
commit 9a92d2d
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/itou/static/js/gps.js b/itou/static/js/gps.js
@@ -1,8 +1,9 @@
 htmx.onLoad((target) => {
+    const searchUserInputField = $("#js-search-user-input")
     // Based on static/admin/js/vendor/select2/i18n/fr.js
     // Overriding the noResults text is extraordinary complicated.
     // https://github.com/select2/select2/issues/3799
-    $("#js-search-user-input").select2({
+    searchUserInputField.select2({
         placeholder: 'Jean DUPONT',
         escapeMarkup: function (markup) { return markup; },
         language: {
@@ -42,4 +43,15 @@ htmx.onLoad((target) => {
             }
         }
     });
+    searchUserInputField.on("select2:select", function (e) {
+        const submit_button = $("#join_group_form .btn-primary.disabled");
+        submit_button.attr("disabled", false);
+        submit_button.removeClass("disabled");
+        submit_button.attr("type", "submit"); // hack because button_forms.html don't allow easily to change it.
+    });
+    searchUserInputField.on("select2:unselect", function (e) {
+        const submit_button = $("#join_group_form .btn-primary");
+        submit_button.attr("disabled", true);
+        submit_button.addClass("disabled");
+    });
 });
diff --git a/itou/templates/gps/join_group.html b/itou/templates/gps/join_group.html
@@ -15,12 +15,12 @@
     <section class="s-box" id="join_group">
         <div class="s-box__container container">
             <div class="c-form">
-                <form method="post" class="js-prevent-multiple-submit">
+                <form method="post" class="js-prevent-multiple-submit" id="join_group_form">
                     {% csrf_token %}
                     {% bootstrap_form_errors form type="all" %}
                     {% bootstrap_field form.user %}
                     {% bootstrap_field form.is_referent %}
-                    {% itou_buttons_form primary_label="Rejoindre le groupe de ce candidat" reset_url=reset_url %}
+                    {% itou_buttons_form primary_label="Rejoindre le groupe de ce candidat" reset_url=reset_url primary_disabled=True %}
                 </form>
             </div>
         </div>