javascript - 输入更改时如何清除表单？

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

您可以像这样使用表单重置

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