如何在輸入更改時清除表單？

Question

我的例子形式：

@using (@Html.BeginForm()) 
{ 
@Html.AntiForgeryToken() 
<div class="form-group"> 
    @Html.LabelFor(model => model.Server) 
    @Html.TextBoxFor(model => model.Server, new { @class = "form-control", id = "serverTextbox" }) 
</div> 
<div class="form-group"> 
    @Html.LabelFor(model => model.Username) 
    @Html.DropDownListFor(model => model.Username, Enumerable.Empty<SelectListItem>(), new { @class = "form-control", id = "usersCombo" }) 
</div> 
<div class="form-group"> 
    @Html.LabelFor(model => model.Password) 
    @Html.PasswordFor(model => model.Password, new { @class = "form-control" }) 
</div> 
<div class="form-group"> 
    @Html.LabelFor(model => model.Database) 
    @Html.DropDownListFor(model => model.Database, Enumerable.Empty<SelectListItem>(), new { @class = "form-control", id = "databaseCombo" }) 
</div> 
<div class="form-group"> 
    @Html.LabelFor(model => model.Company) 
    @Html.DropDownListFor(model => model.Company, Enumerable.Empty<SelectListItem>(), new { @class = "form-control", id = "companyCombo" }) 
</div> 


<div class="form-group"> 
    <input type="submit" id="LogOn" value="Log In" class="btn btn-default" /> 
</div> 
<div> 
    @Html.ValidationSummary(true) 
</div> 

} 

因此，當用戶更改其服務器項（第一輸入），我期待實現一個.change（）事件偵聽器（我認爲），以清除其他從屬形式（下拉&輸入），而不使用實際的重置按鈕。

任何幫助表示讚賞

Answer 1

選項提出這樣的價值觀遠也會抹去服務器的價值，我認爲這是不可取的。

一個更好的選擇，而不是jQuery的依賴，很可能是：

var serverInput = document.getElementById("serverTextbox"); 
var form = document.getElementsByTagName("form")[0]; 

serverInput.addEventListener("change", function() { 
    var temp = this.value; 
    form.reset(); 
    this.value = temp; 
}); 

Answer 2

您可以使用表格復位這樣

$('input .form-control').on('change',function() 
{ 
    $("#form")[0].reset();   
}) 

你也可以寫你的自定義實現，這將顯式重置像

function clearForms() 
{ 
    JQuery(".form-control").attr('value',' '); 
    //do this for all controls and call this function 
}