提交后如何刷新表單？

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;


        });

    });

這里重置不起作用。 我沒有得到任何重置問題。 表單提交后，我想用數據庫值刷新表單（以顯示剛才選擇的值）。

提交后如何刷新頁面或 div 刷新。

Answer 1

使用 Pure JavaScript 重置表單字段。

document.getElementById("formid").reset();

Answer 2

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

});

通過將href設置為實際頁面來重新加載頁面：）

或者您也可以使用以下方法：

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

順便說一句：我看不到您的服務器端代碼，您必須呈現選定的值，當然，我假設您正在返回它們，我的答案並不涵蓋服務器端場景。 我的代碼僅適用於您將選定的值保存到db后從服務器返回的情況。

Answer 3

如果您擁有服務器端代碼，則可以在響應中返回值，然后在回調中使用這些值填充字段。

假設這是您的響應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 4

作為由doniyor回答說，你可以用window.location.href刷新頁面，但不會跟你只是寫給你的數據庫中的值填充表單。

你們有與數據庫填充表單，實現既可能是您理想的情況下（由你）兩個選項。

第一種是在您第一次加載html時填充表單。 這可以通過查詢你的數據庫，並獲取值，然后根據像這樣的值設置正確的單選按鈕來完成服務器端：

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

另一個選項是使用jquerys.prop（）方法設置復選框異步。 這要求您的標簽具有唯一的ID（無論如何它們都應具有）。 例：

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

在后一種情況下，可以讓您發布的腳本輸出正確的ID以供使用。 這是到你的自由裁量權，並依賴於你的情況，但希望這個答案指向你在正確的方向。

最好的祝福

Answer 5

嘗試使用這個

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