Question

我创建了一个由提交和重置按钮组成的表单。在表单提交之前，重置按钮工作正常。提交表单后，我的View包含一些已预先填充的值。提交表单后，如果有任何错误消息，则使用ModelState.AddError（）方法显示该表单。现在，如果我点击重置按钮，则值不会被清除。

我尝试使用像

这样的JQuery

 $("#reset_button").click(function() {
                $("#InterviewerName").val("");
                $("#ContactName").val("");
});

但它不起作用。任何想法？

这是我的按钮形式

<input type="submit" id="submit" value="submit" style="height:30px; width:85px; border:none; text-align:center; background-color:#06266F;cursor:pointer;color:white" /> 
    @Html.Raw("&nbsp;")
    <input type ="reset" id ="reset_button", value ="Reset" style="height:30px; width:85px; text-align:center; border:none; background-color:#06266F;cursor:pointer;color:white"/>

Answer 1

var form = $("#myForm");

form
    .on({
        submit : function() {
            //handle form submit

            //assuming it's an ajax call otherwise ignore
            return false;
        },
        reset : function() {
            // handle form reset
            $("#InterviewerName").val("");
            $("#ContactName").val("");

            //assuming it's an ajax call otherwise ignore
            return false;

        }
    });

表单提交和重置事件处理程序属于表单

我还建议你将你的css移动到一个文件，如果它不是由javascript生成的，这也不是一个好主意

Answer 2

使用此Jquery函数：

$.fn.clearForm = function() {
        return this.each(function() {
            var type = this.type, tag = this.tagName.toLowerCase();
            if (tag == 'form')
                return $(':input',this).clearForm();
            if (type == 'text' || type == 'password' || tag == 'textarea')
                this.value = '';
            else if (type == 'checkbox' || type == 'radio')
                this.checked = false;
            else if (tag == 'select')
                this.selectedIndex = -1;
        });
    };

并使用以下方法调用此函数：

  $("#reset_button").click(function(){

      $('#login').clearForm();
  });

Answer 3

为什么不像这样使用重置类型按钮

<input type="reset" value="Reset"/>

JSFiddle

修改

以下是一个代码示例，它将清空输入的所有值

$(document).ready(function() {
    $("#reset_button").on('click', function() {
        $('#myForm').find('input').each(function() {
            $(this).val('');
        });
    });
});

JSFiddle

重置按钮在表单提交之前有效，但之后没有

3 个答案:

修改