title: After form submission clear fields and provide message
body: <p>I have an HTML form that is using jQuery to process the form selections. The form submits and processes correctly but how do I clear the fields after submission and place a message next to the Submit button that says "Statements sent." Thank you.</p>
  
  <p><strong>HTML5</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Observation Checklist: World-class-teaching-pitch&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;h2&gt;Observation Checklist: World-class-teaching-pitch&lt;/h2&gt;
    &lt;p&gt;Make your selections from each of the drop down boxes:&lt;/p&gt;
    &lt;form id="sform" name="myForm"&gt;
      &lt;div class="form-group"&gt;
  
        &lt;label for="salesperson"&gt;Select a salesperson:&lt;/label&gt;
        &lt;select class="form-control" id="salesperson" name="salesper"&gt;
          &lt;option value="Jerry Robinson"&gt;Jerry Robinson&lt;/option&gt;
          &lt;option value="John Doe"&gt;John Doe&lt;/option&gt;
          &lt;option value="Sally Smith" selected&gt;Sally Smith&lt;/option&gt;
          &lt;option value="Carol Adams"&gt;Carol Adams&lt;/option&gt;
          &lt;option value="Zeek Mowat"&gt;Zeek Mowat&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;br&gt;
  
        &lt;label for="sel1"&gt;Provided assessment of cust's key challenges:&lt;/label&gt;
        &lt;select class="form-control" id="sel1" name="provided"&gt;
          &lt;option value="Very Strong"&gt;Very Strong&lt;/option&gt;
          &lt;option value="Strong"&gt;Strong&lt;/option&gt;
          &lt;option value="Average" selected&gt;Average&lt;/option&gt;
          &lt;option value="Needs Improvement"&gt;Needs Improvement&lt;/option&gt;
          &lt;option value="High priority improvement"&gt;High priority improvement&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;br&gt;
  
        &lt;label for="sel2"&gt;Shared anecdotes of other companies:&lt;/label&gt;
        &lt;select class="form-control" id="sel2" name="shared"&gt;
          &lt;option value="Very Strong"&gt;Very Strong&lt;/option&gt;
          &lt;option value="Strong"&gt;Strong&lt;/option&gt;
          &lt;option value="Average" selected&gt;Average&lt;/option&gt;
          &lt;option value="Needs Improvement"&gt;Needs Improvement&lt;/option&gt;
          &lt;option value="High priority improvement"&gt;High priority improvement&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;br&gt;
  
        &lt;label for="sel3"&gt;Asked for reactions:&lt;/label&gt;
        &lt;select class="form-control" id="sel3" name="reaction"&gt;
          &lt;option value="Very Strong"&gt;Very Strong&lt;/option&gt;
          &lt;option value="Strong"&gt;Strong&lt;/option&gt;
          &lt;option value="Average" selected&gt;Average&lt;/option&gt;
          &lt;option value="Needs Improvement"&gt;Needs Improvement&lt;/option&gt;
          &lt;option value="High priority improvement"&gt;High priority improvement&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;br&gt;
  
        &lt;label for="sel4"&gt;Established goodwill:&lt;/label&gt;
        &lt;select class="form-control" id="sel4" name="goodwill"&gt;
          &lt;option value="Very Strong"&gt;Very Strong&lt;/option&gt;
          &lt;option value="Strong"&gt;Strong&lt;/option&gt;
          &lt;option value="Average" selected&gt;Average&lt;/option&gt;
          &lt;option value="Needs Improvement"&gt;Needs Improvement&lt;/option&gt;
          &lt;option value="High priority improvement"&gt;High priority improvement&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;br&gt;
  
        &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
  
      &lt;/div&gt;&lt;!-- end of form-group --&gt;
    &lt;/form&gt;
  &lt;/div&gt; &lt;!--end of container--&gt;
  &lt;script type="text/javascript" src="js/xapiwrapper.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/init.js"&gt;&lt;/script&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function(){
     $('#sform').on('submit', function(e) { //use on if jQuery 1.7+
          e.preventDefault();  //prevent form from submitting
  
  
          // Get the values from the drop down boxes
          var salesper = $( "select#salesperson" ).val();
          var provided = $( "select#sel1" ).val() + " on 'Provided assessment of cust's key challenges'";
          var shared = $( "select#sel2" ).val() + " on 'Shared anecdotes of other companies'";
          var reaction = $( "select#sel3" ).val() + " on 'Asked for reactions'";
          var goodwill = $( "select#sel4" ).val() + " on 'Established goodwill'";
  
          var myArray = [provided, shared, reaction, goodwill];
          var myLen = myArray.length;
  
  
          for (i = 0; i &lt; myLen; i++){
  
              var stmt = 
              //actor 
              {"actor" : {"mbox" : "mailto:testPerson@example.com",
                  "name" : salesper},
  
              //verb
              "verb" : {"id" : "http://adlnet.gov/expapi/verbs/scored",
                        "display" : {"en-US" : "scored"}},
  
              //object  
              "object" : {"id" : "http://adlnet.gov/expapi/activities/question",
                              "definition" : {"name" : {"en-US" : myArray[i]}}
                          },
  
              //category information
              "context" : {"contextActivities" : {"category" :
                          {"id" : "http://www.example.com/observation",
                           "definition" : {"name" : {"en-US" : "observation"}}}}
                          }
  
              };  //end of stmt
  
  
               ADL.XAPIWrapper.changeConfig({
                  'endpoint': 'https://lrs.adlnet.gov/xapi/',
                  'user': 'xapi-tools',
                  'password': 'xapi-tools',
              });
  
              ADL.XAPIWrapper.sendStatement(stmt, function(resp, obj){  
              ADL.XAPIWrapper.log("[" + obj.id + "]: " + resp.status + " - " + resp.statusText);});
  
              }//end of for loop
  
  
      }); //end of submit function
  });  //end of document ready
  </code></pre>