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
}

Answer 2

到目前为止提供的选项也将删除服务器值，我认为这是不可取的。

更好的选择，而不是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;
});

当输入发生变化时，如何清除表格？

2 个答案: