表單提交後清除字段並提供消息

我有一個使用jQuery處理表單選擇的HTML表單。表單提交併正確處理，但是如何在提交後清除字段，並在提交按鈕旁邊放置一條消息，標明「發送的語句」。謝謝。表單提交後清除字段並提供消息

HTML5

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Observation Checklist: World-class-teaching-pitch</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Observation Checklist: World-class-teaching-pitch</h2> 
    <p>Make your selections from each of the drop down boxes:</p> 
    <form id="sform" name="myForm"> 
    <div class="form-group"> 

     <label for="salesperson">Select a salesperson:</label> 
     <select class="form-control" id="salesperson" name="salesper"> 
     <option value="Jerry Robinson">Jerry Robinson</option> 
     <option value="John Doe">John Doe</option> 
     <option value="Sally Smith" selected>Sally Smith</option> 
     <option value="Carol Adams">Carol Adams</option> 
     <option value="Zeek Mowat">Zeek Mowat</option> 
     </select> 

     <br> 

     <label for="sel1">Provided assessment of cust's key challenges:</label> 
     <select class="form-control" id="sel1" name="provided"> 
     <option value="Very Strong">Very Strong</option> 
     <option value="Strong">Strong</option> 
     <option value="Average" selected>Average</option> 
     <option value="Needs Improvement">Needs Improvement</option> 
     <option value="High priority improvement">High priority improvement</option> 
     </select> 

     <br> 

     <label for="sel2">Shared anecdotes of other companies:</label> 
     <select class="form-control" id="sel2" name="shared"> 
     <option value="Very Strong">Very Strong</option> 
     <option value="Strong">Strong</option> 
     <option value="Average" selected>Average</option> 
     <option value="Needs Improvement">Needs Improvement</option> 
     <option value="High priority improvement">High priority improvement</option> 
     </select> 

     <br> 

     <label for="sel3">Asked for reactions:</label> 
     <select class="form-control" id="sel3" name="reaction"> 
     <option value="Very Strong">Very Strong</option> 
     <option value="Strong">Strong</option> 
     <option value="Average" selected>Average</option> 
     <option value="Needs Improvement">Needs Improvement</option> 
     <option value="High priority improvement">High priority improvement</option> 
     </select> 

     <br> 

     <label for="sel4">Established goodwill:</label> 
     <select class="form-control" id="sel4" name="goodwill"> 
     <option value="Very Strong">Very Strong</option> 
     <option value="Strong">Strong</option> 
     <option value="Average" selected>Average</option> 
     <option value="Needs Improvement">Needs Improvement</option> 
     <option value="High priority improvement">High priority improvement</option> 
     </select> 

     <br> 

     <button type="submit" class="btn btn-default">Submit</button> 

    </div><!-- end of form-group --> 
    </form> 
</div> <!--end of container--> 
<script type="text/javascript" src="js/xapiwrapper.min.js"></script> 
<script src="js/init.js"></script> 



</body> 
</html>

$(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 < myLen; i++){ 

      var stmt = 
      //actor 
      {"actor" : {"mbox" : "mailto:[email protected]", 
       "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

來源

2017-04-26 John M.

難道以下幫助的答案，或者是你仍然有問題？ –

對不起，是的，它解決了這個問題，我將其標記爲正確的答案。感謝您的提示。 –

我建議你的表單元素上調用.reset()：

// Reset (plain JS is sufficient here) 
document.getElementById("myform").reset();

，或者，如果你瓦特螞蟻使用jQuery：

$('#myform')[0].reset();

至於旁邊的按鈕信息，只需將一個元素存在，並修改其文本成功調用後：

$('#myMessageContainer').text("[your message here]");

來源

2017-04-26 15:38:50

表單提交後清除字段並提供消息

回答

相關問題