如何在提交後刷新表單？

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; 
});