gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 19:04:59 25 4
gpt4 key购买 nike

我有一个使用 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>

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

最佳答案

我建议调用 .reset()在你的表单元素上:

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

或者,如果您使用 jQuery:

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

至于按钮旁边的消息,只需在此处放置一个元素并在成功调用后修改其文本:

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

关于javascript - 提交表单后清除字段并提供消息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43638698/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com