Prevent multiple submissions on contact us form.

PROD-1565

lms/djangoapps/support/static/support/jsx/logged_in_user.jsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Button, StatusAlert } from '@edx/paragon';
 import StringUtils from 'edx-ui-toolkit/js/utils/string-utils';
 
-function LoggedInUser({ userInformation, onChangeCallback, submitForm, showWarning, showDiscussionButton, reDirectUser, errorList }) {
+function LoggedInUser({ userInformation, onChangeCallback, handleClick, showWarning, showDiscussionButton, reDirectUser, errorList }) {
   let courseElement;
   let detailElement;
   let discussionElement = '';
@@ -107,7 +107,8 @@ function LoggedInUser({ userInformation, onChangeCallback, submitForm, showWarni
           <div className="col-sm-12">
             <Button
               className={['btn', 'btn-primary', 'btn-submit']}
-              type="submit"
+              type="button"
+              onClick={handleClick}
               label={gettext('Create Support Ticket')}
             />
           </div>
@@ -116,7 +117,7 @@ function LoggedInUser({ userInformation, onChangeCallback, submitForm, showWarni
     );
   }
 
-  return (<form id="contact-us-form" onSubmit={submitForm} onChange={onChangeCallback}>
+  return (<form id="contact-us-form" onChange={onChangeCallback}>
     <div className="row">
       <hr className="col-sm-12" />
     </div>
@@ -162,7 +163,7 @@ function LoggedInUser({ userInformation, onChangeCallback, submitForm, showWarni
     /* /> */
 
 LoggedInUser.propTypes = {
-  submitForm: PropTypes.func.isRequired,
+  handleClick: PropTypes.func.isRequired,
   onChangeCallback: PropTypes.func.isRequired,
   reDirectUser: PropTypes.func.isRequired,
   userInformation: PropTypes.shape({

lms/djangoapps/support/static/support/jsx/single_support_form.jsx

@@ -28,6 +28,7 @@ class RenderForm extends React.Component {
     this.userInformation = this.props.context.user;
     const course = this.userInformation ? this.userInformation.course_id : '';
     this.courseDiscussionURL = '/courses/{course_id}/discussion/forum';
+    this.submitButton = null;
     this.state = {
       currentRequest: null,
       errorList: initialFormErrors,
@@ -44,7 +45,7 @@ class RenderForm extends React.Component {
       message: gettext('Enter some details for your support request.'),
       request: gettext('Something went wrong. Please try again later.'),
     };
-    this.submitForm = this.submitForm.bind(this);
+    this.handleClick = this.handleClick.bind(this);
     this.reDirectUser = this.reDirectUser.bind(this);
     this.formOnChangeCallback = this.formOnChangeCallback.bind(this);
   }
@@ -107,12 +108,15 @@ class RenderForm extends React.Component {
     window.location.href = this.courseDiscussionURL.replace('{course_id}', formData.course);
   }
 
-  submitForm(event) {
+  handleClick(event) {
     event.preventDefault();
+    this.submitButton = event.currentTarget;
+    this.submitButton.setAttribute("disabled", true);
     const formData = this.getFormDataFromState();
     this.clearErrorState();
     this.validateFormData(formData);
     if (this.formHasErrors()) {
+      this.submitButton.removeAttribute("disabled");
       return this.scrollToTop();
     }
     this.createZendeskTicket(formData);
@@ -141,15 +145,19 @@ class RenderForm extends React.Component {
     request.setRequestHeader('X-CSRFToken', $.cookie('csrftoken'));
     request.send(JSON.stringify(data));
     request.onreadystatechange = function success() {
-      if (request.readyState === 4 && request.status === 201) {
-        this.setState({
-          success: true,
-        });
+      if (request.readyState === 4) {
+        this.submitButton.removeAttribute("disabled");
+        if (request.status === 201) {
+            this.setState({
+                success: true,
+            });
+        }
       }
     }.bind(this);
 
     request.onerror = function error() {
       this.updateErrorInState('request', this.formValidationErrors.request);
+      this.submitButton.removeAttribute("disabled");
       this.scrollToTop();
     }.bind(this);
   }
@@ -185,7 +193,7 @@ class RenderForm extends React.Component {
       userElement = (<LoggedInUser
         userInformation={this.userInformation}
         onChangeCallback={this.formOnChangeCallback}
-        submitForm={this.submitForm}
+        handleClick={this.handleClick}
         showWarning={this.showWarningMessage()}
         showDiscussionButton={this.showDiscussionButton()}
         reDirectUser={this.reDirectUser}

lms/static/sass/views/_support.scss

@@ -292,6 +292,10 @@
       background-color: $m-blue-d6;
       border-color: $m-blue-d6;
     }
+
+    &[disabled] {
+        color: $white;
+    }
   }
 
   .file-loading,