Fix form submission handling (#3672)

* Fix form submission handling * Fix volunteer signup form
learning-unlimited · Aug 25, 2023 · 3e0ac6b · 3e0ac6b
1 parent 03fefcd
commit 3e0ac6b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/esp/templates/elements/html b/esp/templates/elements/html
@@ -79,7 +79,12 @@
     <!-- prevent forms from being submitted twice -->
     <script text="text/javascript">
       $j(function() {
-        $j('[type=submit]:not(.stripe-button-el)').click(function(){
+        $j('[type=submit]:not(.stripe-button-el)').on('click', function(event){
+          <!-- prevent any other behaviors -->
+          event.preventDefault();
+          event.stopPropagation();
+
+          <!-- disable the submit button -->
           $j(this).prop('disabled', true);
           var form = $j(this).parents('form');
           <!-- this adds a hidden field in case we care what the button name/value are -->
@@ -88,9 +93,24 @@
               name: $j(this).prop('name'),
               value: $j(this).prop('value')
           }).appendTo(form);
+          <!-- check csrf cookie in form (we prevented this above) -->
+          check_csrf_cookie(form[0]);
+          var submitted = false;
+          <!-- check form validity -->
           if(form[0].reportValidity()) {
-            form.submit();
-          } else {
+            <!-- run form's onsubmit if it has one -->
+            if(form[0].hasAttribute("onsubmit")) {
+              if(form[0].onsubmit()) {
+                form[0].submit();
+                submitted = true;
+              }
+            } else {
+              form[0].submit();
+              submitted = true;
+            }
+          }
+          <!-- if we didn't end up submitting the form, reenable the submit button -->
+          if(!submitted) {
             $j(this).prop('disabled', false);
           }
         });

diff --git a/esp/templates/program/modules/teacherclassregmodule/classedit.html b/esp/templates/program/modules/teacherclassregmodule/classedit.html
@@ -53,7 +53,7 @@ <h1>{{ addoredit }}ing a {{ classtype }} for {{ program.niceName }}</h1>
 {% endif %}
 
 <div id="program_form">
-<form action="{{request.path}}" id="clsform" name="clsform" method="post" class="form-inline"{% if grade_range_popup %} onSubmit="check_grade_range(this)"{% endif %}">
+<form action="{{request.path}}" id="clsform" name="clsform" method="post" class="form-inline"{% if grade_range_popup %} onsubmit="return check_grade_range(this);"{% endif %}">
 
 {% if form.errors %}
 <p align="center">

diff --git a/esp/templates/program/modules/volunteersignup/signup.html b/esp/templates/program/modules/volunteersignup/signup.html
@@ -21,7 +21,7 @@
 function confirm_cancellation() {
     $j("input[name=clear_requests]").val("True");
     $j("#confirm_cancellation_dialog").dialog("close");
-    $j("#volunteer_shift_form").submit();
+    $j("#volunteer_shift_form").trigger("submit");
 }
 
 function decline_cancellation() {
@@ -39,7 +39,7 @@
         //  Check if the user has previous requests and is asking to clear all of them
         var checkboxes_checked = $j("input[name=requests]:checked");
         if (($j("input[name=has_previous_requests]").val() == "True") &&
-            (checkboxes_checked.size() == 0)) {
+            (checkboxes_checked.length == 0)) {
             //  If so, prevent the form from being submitted - we want a confirmation
             event.preventDefault();
 
@@ -145,7 +145,7 @@ <h3>Volunteer Shifts Cancelled</h3>
         </div>
         {{ form.non_field_errors }}
         <br><br>
-        <input style="display: block" id="volunteer_form_submit" type="submit" value="Submit" class="btn btn-primary" />
+        <input style="display: block" id="volunteer_form_submit" type="button" value="Submit" class="btn btn-primary" />
       </div>
     </center>
   </form>