使用jQuery清除表单字段

小开

jQuery 1.6+:

$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.prop('checked', false)
.prop('selected', false);

jQuery <1．6:

$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');

请看这个帖子: 使用jQuery重置多级表单 < / p >

或

$('#myform')[0].reset();

jQuery 建议:

要检索和更改DOM属性，例如表单元素的checked、selected或disabled状态，请使用.prop ()方法。

小开

为什么需要用JavaScript来完成呢?

<form>
<!-- snip -->
<input type="reset" value="Reset"/>
</form>

http://www.w3.org/TR/html5/the-input-element.html#attr-input-type-keywords

先尝试一下，它不会清除具有默认值的字段。

下面是一种用jQuery实现的方法:

$('.reset').on('click', function() {
$(this).closest('form').find('input[type=text], textarea').val('');
});

小开

这不会处理表单输入字段默认值为非空的情况。

应该可以工作

$('yourdiv').find('form')[0].reset();

小开

最佳答案

$(".reset").click(function() {
$(this).closest('form').find("input[type=text], textarea").val("");
});

小开

如果我想清除除accountType以外的所有字段，请使用以下方法

$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');

小开

让我们说，如果你想清除字段，除了accountType，在同一时间下拉框将被重置为特定的值，i。“所有”。其余字段应重置为空即文本框。这种方法将用于清除我们需要的特定字段。

 $(':input').not('#accountType').each( function() {


if(this.type=='text' || this.type=='textarea'){
this.value = '';
}
else if(this.type=='radio' || this.type=='checkbox'){
this.checked=false;
}
else if(this.type=='select-one' || this.type=='select-multiple'){
this.value ='All';
}
});

小开

$('#editPOIForm').each(function(){
this.reset();
});

其中editPOIForm是你的表单的id属性。

小开

添加隐藏复位按钮如下

<input id="resetBtn" type="reset" value="reset" style="display:none" />
// Call reset buttons click event
// Similar to ClearInputs('resetBtn');
function ClearInputs(btnSelector) {
var btn = $("#" + btnSelector);
btn.click();
}

小开

有什么理由不应该使用它吗?

$("#form").trigger('reset');

小开

我在这里看到的代码和相关的SO问题似乎不完整。

重置表单意味着从HTML中设置原始值，所以我根据上面的代码将其放在一个小项目中:

            $(':input', this)
.not(':button, :submit, :reset, :hidden')
.each(function(i,e) {
$(e).val($(e).attr('value') || '')
.prop('checked',  false)
.prop('selected', false)
})


$('option[selected]', this).prop('selected', true)
$('input[checked]',   this).prop('checked',  true)
$('textarea',         this).each(function(i,e) { $(e).val($(e).html()) })

如果我遗漏了什么或者有什么需要改进的地方，请告诉我。

小开

$('form').submit(function() {


var el = $(this);


$('<button type="reset" style="display:none; "></button>')
.appendTo(el)
.click()
.remove()
;


return false;


});

小开

使用jQuery实现正常复位函数

setTimeout("reset_form()",2000);

并把这个函数写出来的网站jQuery文档就绪

<script>
function reset_form()
{
var fm=document.getElementById('form1');
fm.reset();
}
</script>

小开

当页面包含一个涉及IHttpHandler请求处理(captcha)的对web用户控件的调用时，以上任何一种方法都不工作。在发送请求(用于图像处理)之后，下面的代码不清除表单上的字段(在发送HttpHandler请求之前)，一切都正常工作

<input type="reset"  value="ClearAllFields" onclick="ClearContact()" />


<script type="text/javascript">
function ClearContact() {
("form :text").val("");
}
</script>

小开

如果有人还在阅读这篇文章，这里有一个最简单的解决方案，使用的不是jQuery，而是纯JavaScript。如果你的输入字段在表单中，有一个简单的JavaScript重置命令:

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

更多关于它的信息: http://www.w3schools.com/jsref/met_form_reset.asp < / p >

干杯!

小开

@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
OnSuccess = "ClearInput",
HttpMethod = "Post",
UpdateTargetId = "defect-list",
InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" }))

frmID是表单的标识

OnSuccess的操作，我们调用的JavaScript函数名称为"ClearInput"

<script type="text/javascript">
function ClearInput() {
//call action for render create view
$("#frmID").get(0).reset();
}
</script>

if you do both of these right, then you will not be able to stop it from working...

小开

简单却很有魅力。

$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS

小开

如果您使用选择器并使值为空值，这不是重置表单，而是使所有字段为空。重置是从服务器端加载表单后，使表单成为用户任何编辑操作之前的状态。如果有一个名为“username”的输入，并且该用户名是从服务器端预填充的，本页上的大多数解决方案将从输入中删除该值，而不是将其重置为用户更改之前的值。如果你需要重置表单，使用这个:

$('#myform')[0].reset();

如果您不需要重置表单，而是用一些值填充所有输入，例如空值，那么您可以使用其他注释中的大多数解决方案。

小开

我用这个:

$(".reset").click(function() {
$('input[type=text]').each(function(){
$(this).val('');
});
});

这是我的按钮:

<a href="#" class="reset">
<i class="fa fa-close"></i>
Reset
</a>

小开

我写了一个通用的jQuery插件:

/**
* Resets any input field or form
*/
$.fn.uReset = function () {
return this.filter('form, :input').each(function () {
var input = $(this);
        

// Reset the form.
if (input.is('form')) {
input[0].reset();
return;
}


// Reset any form field.
if (input.is(':radio, :checkbox')) {
input.prop('checked', this.defaultChecked);
} else if (input.is('select')) {
input.find('option').each(function () {
$(this).prop('selected', this.defaultSelected);
});
} else if (this.defaultValue) {
input.val(this.defaultValue);
} else {
console.log('Cannot reset to default value');
}
});
};


$(function () {
// Test jQuery plugin.
$('button').click(function (e) {
e.preventDefault();
        

var button = $(this),
inputType = button.val(),
form = button.closest('form');
        

if (inputType === 'form') {
form.uReset()
} else {
$('input[type=' + inputType + '], ' + inputType, form).uReset();
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h3>Form</h3>
<form>
<input type="text" value="default"/><br /><br />
Ch 1 (default checked) <input type="checkbox" name="color" value="1" checked="checked" /><br />
Ch 2 <input type="checkbox" name="color" value="2" /><br />
Ch 3 (default checked) <input type="checkbox" name="color" value="3" checked="checked" /><br /><br />
<select name="time"><br />
<option value="15">15</option>
<option selected="selected" value="30">30</option>
<option value="45">45</option>
</select><br /><br />
R 1 <input type="radio" name="color" value="1" /><br />
R 2 (default checked) <input type="radio" name="color" value="2" checked="checked" /><br />
R 3 <input type="radio" name="color" value="3" /><br /><br />
<textarea>Default text</textarea><br /><br />
    

<p>Play with form values and then try to reset them</p>
    

<button type="button" value="text">Reset text input</button>
<button type="button" value="checkbox">Reset checkboxes</button>
<button type="button" value="select">Reset select</button>
<button type="button" value="radio">Reset radios</button>
<button type="button" value="textarea">Reset textarea</button>
<button type="button" value="form">Reset the Form</button>
</form>

小开

$('form[name="myform"]')[0].reset();

小开

我有个最简单的重置姿势的技巧

jQuery("#review-form")[0].reset();

或

$("#review-form").get().reset();

小开

为什么你不使用document.getElementById("myId").reset(); ?这是简单而漂亮的

小开

经过测试和验证的代码:

  $( document ).ready(function() {
$('#messageForm').submit(function(e){
e.preventDefault();
});
$('#send').click(function(e){
$("#messageForm")[0].reset();
});
});

Javascript必须包含在$(document).ready中，并且必须与你的逻辑一致。

小开

在Javascript中，你可以简单地使用getElementById("your-form-id").reset();语法来实现

你也可以使用jquery通过调用重置函数$('#your-form-id')[0].reset();

记住不要忘记[0]。如果，您将得到以下错误

TypeError: $(…)。重置不是一个函数

JQuery还提供了一个可以使用的事件

$ (' # form_id ') .trigger(“重置”);

我试过了，成功了。

注意:需要注意的是，这些方法只会将表单重置为服务器在页面加载时设置的初始值。这意味着如果你的输入在你做随机改变之前被设置为值“set value”，那么在reset方法被调用后，该字段将被重置为相同的值。

希望能有所帮助

小开

如果你想清空所有的输入框，不管它的类型是什么，那么这是一分钟的步骤

 $('#MyFormId')[0].reset();

小开

下面的代码清除所有表单，它的字段将为空。如果页面有多个表单，而您只想清除特定的表单，请注明表单的id或类

$("body").find('form').find('input,  textarea').val('');

小开

最简单和最好的解决方案是-
$("#form")[0].reset(); < / p >

这里不要用-
$(this)[0].reset(); < / p >

小开

你们中的一些人抱怨无线电和诸如此类的默认“已检查”状态被清除…你所要做的就是将:radio，:复选框选择器添加到.not中，问题就解决了。

如果你不能让所有其他重置函数工作，这个可以。

改编自ngen的回答

function form_reset(formID){
$(':input','#'+formID)
.not(':button',':submit',':reset',':hidden',':radio',':checkbox')
.val('');
}

小开

通过使用JQuery的.trigger()和原生javascript的.reset()的组合，所有表单元素都可以重置为空白状态。

$(".reset").click(function(){
$("#<form_id>").trigger("reset");
});

将<form_id>替换为要重置的form id。

小开

$(document).ready(function() {
$('#reset').click(function() {
$('#compose_form').find("input[type=text] , textarea ").each(function() {
$(this).val('');
});
});
});