Question

我有一个HTML表单，它使用jQuery来处理表单选择。表单正确提交和处理，但如何在提交后清除字段，并在“提交”按钮旁边显示一条消息，其中显示＆＃34;语句已发送。＆＃34;谢谢。

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>

JS

$(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: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

Answer 1

我建议您在表单元素上调用.reset()：

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

或者，如果你希望使用jQuery：

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

至于按钮旁边的消息，只需在那里放置一个元素并在成功通话后修改其文本：

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

表单提交后清除字段并提供消息

1 个答案: