javascript 提交后如何刷新表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13554419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i refresh form after submit?
提问by jaya
i have form like
我有像
<form id="abc">
<div>
<select >
<option id= "1"> ha1 </option>
<option id= "1"> ha2 </option>
<option id= "1"> ha3 </option>
<option id= "1"> ha4 </option>
</select>
<input type="submit">
</div>
</form>
for form submit i have used like
对于表单提交，我使用过
$(document).ready(function() {
$('#abc').submit(function(){
$.post('filter.php', $(this).serialize(), function(data){
$('#abc').reset(); //(this).reset();
});
return false;
});
});
Here reset is not working. Any problem with reset i am not getting. After form submit, i want to refresh form with db values (to display values selected just now).
这里重置不起作用。我没有遇到任何重置问题。表单提交后，我想用 db 值刷新表单（以显示刚刚选择的值）。
how can i refresh page after submit or either div refresh.
如何在提交或 div 刷新后刷新页面。
采纳答案by doniyor
$(document).ready(function() {
$('#abc').submit(function(){
$.post('filter.php', $(this).serialize(), function(data){
window.location.href=window.location.href;
});
return false;
});
});
reloads the page by setting the href to the actual one :)
通过将 href 设置为实际的来重新加载页面:)
or you can also use this:
或者你也可以使用这个：
parent.document.getElementById("abc").reload();
by the way: i dont see your serverside code, you have to render the selected values, of course, i am assuming that you are returning them, my answer doesnot cover the serverside scene. my code is only for the case that you are returning the selected values from server after saving them into db.
顺便说一句：我没有看到您的服务器端代码，您必须呈现选定的值，当然，我假设您正在返回它们，我的回答不包括服务器端场景。我的代码仅适用于将选定的值保存到数据库后从服务器返回的情况。
回答by pbibergal
If you own server side code, you can return the values in the response and then fill the fields with these values in the callback.
如果您拥有服务器端代码，则可以在响应中返回值，然后在回调中使用这些值填充字段。
Let's say this is your response JSON:
假设这是您的响应 JSON：
{
data: [{
"username": "john doe"
}]
}
$('#abc').submit(function(){
$.post('filter.php', $(this).serialize(), function(data){
$('#abc').reset(); //(this).reset();
$('input#username').val(data.username);
});
return false;
});
回答by Martin Sommervold
As said in the answer by doniyor, you can use window.location.href to refresh the page, but this will not populate your form with the values you just wrote to your database.
正如 doniyor 在回答中所说，您可以使用 window.location.href 刷新页面，但这不会使用您刚刚写入数据库的值填充表单。
you have two options available for populating your form with the database, implementing both might be desirable in your case (up to you).
您有两个选项可用于使用数据库填充表单，在您的情况下（由您决定）可能需要实现这两个选项。
The first is to populate the form when you first load your html. This can be done server side by making a query to your database and getting the values, and then setting the correct radio button based on the value like so:
第一个是在您第一次加载 html 时填充表单。这可以在服务器端通过查询您的数据库并获取值，然后根据值设置正确的单选按钮来完成，如下所示：
<input type="radio" selected="selected" />
The other option is to set the checkboxes async with jquerys .prop() method. This requires that your tags have unique ID's (which they should have anyways). Example:
另一个选项是使用 jquerys .prop() 方法设置复选框异步。这要求您的标签具有唯一的 ID（无论如何它们都应该有）。例子：
$("#yourIDHere").prop('checked',true);
In the latter case, you could have the script you post to output the correct ID to use. This is up to your discretion, and is dependant on your case, but hopefully this answer points you in the right direction.
在后一种情况下，您可以让您发布的脚本输出要使用的正确 ID。这取决于您的判断力，并取决于您的情况，但希望这个答案为您指明了正确的方向。
Best regards
最好的祝福
回答by Sumith Harshan
Try to use this,
尝试使用这个，
$('#abc').submit(function(){
$.post('filter.php', $(this).serialize(), function(data){
$('#abc').find('input:text, input:password, input:file, select, textarea').val('');
$('#abc').find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
});
return false;
});
