如何在提交后刷新表单？

Question

我有格式如

<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> 

的形式提交我已经使用像

$(document).ready(function() { 

     $('#abc').submit(function(){ 

      $.post('filter.php', $(this).serialize(), function(data){ 

      $('#abc').reset(); //(this).reset(); 

      });    

      return false; 


     }); 

    }); 

这里重置不工作。任何问题与重置我没有得到。 表单提交后，我想用db值刷新表单（以显示刚刚选择的值）。

如何在提交或者div更新后刷新页面。

parent.document.getElementById("abc").reload(); 

顺便说一下：我没有看到你的服务器端的代码，你

Answer 1

$(document).ready(function() { 
    $('#abc').submit(function(){ 
     $.post('filter.php', $(this).serialize(), function(data){ 
     window.location.href=window.location.href; 
     });    
     return false; 
    }); 

}); 

通过将href设置为实际的:)

，或者您也可以使用此重新加载页面必须呈现选定的值，当然，我假设您正在返回它们，我的回答并不涵盖服务器端场景。我的代码仅适用于将服务器中的选定值保存到数据库后返回的情况。

Answer 2

如果您拥有服务器端代码，则可以返回响应中的值，然后用回调中的这些值填充字段。

比方说，这是你的回应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; 
}); 

Answer 3

如由doniyor的回答，您可以用window.location.href刷新页面说，但这不会与值填充表单你只写了你的数据库。

你有两个选项可用于填充表单与数据库，实现这两个可能是在你的情况（需要你）可取的。

第一个是当你第一次加载你的html时填充表单。

<input type="radio" selected="selected" /> 

另一种选择是设置与jquerys复选框异步：这可以通过查询你的数据库，并获取值，然后根据像这样的值设置正确的单选按钮来完成服务器端.prop（）方法。这就要求你的标签有唯一的ID（他们应该有）。例如：

$("#yourIDHere").prop('checked',true); 

在后一种情况下，您可以让您发布的脚本输出正确的ID以便使用。这取决于你的判断，并取决于你的情况，但希望这个答案能指出你朝着正确的方向。

问候

Answer 4

尝试使用这个，

$('#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; 
});