我想清除表单中的所有输入和textarea字段。在reset
类中使用输入按钮时,其工作原理如下:
$(".reset").bind("click", function() {
$("input[type=text], textarea").val("");
});
这将清除页面上的所有字段,而不仅仅是表单中的字段。对于实际的重置按钮所处的形式,我的选择器将如何显示?
我想清除表单中的所有输入和textarea字段。在reset
类中使用输入按钮时,其工作原理如下:
$(".reset").bind("click", function() {
$("input[type=text], textarea").val("");
});
这将清除页面上的所有字段,而不仅仅是表单中的字段。对于实际的重置按钮所处的形式,我的选择器将如何显示?
Answers:
$(".reset").click(function() {
$(this).closest('form').find("input[type=text], textarea").val("");
});
input[type=password]
领域。
对于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重置多阶段表单
要么
$('#myform')[0].reset();
正如jQuery所建议的:
检索和更改DOM属性,如
checked
,selected
或disabled
元素形式的元素状态,使用.prop()方法。
$(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, select').val('').removeAttr('value');
。它将删除默认值(即value="something"
,但不适用于复选框或选择项。)
$(':input').not(':button, :submit, :reset, :hidden').removeAttr('checked').removeAttr('selected').not(':checkbox, :radio, select').val('');
基于Jeppe Mariager-Lam的评论)
有什么理由不应该使用?
$("#form").trigger('reset');
form
您做错了。如果选择器正确,那将是正确的form
,但它是ID选择器#form
。
$("form").trigger('reset');
确实触发所有<form>
元素上的“重置”事件。在大多数情况下,这可能是错误的。但是$("#form").trigger('reset');
(显示在原始答案中)仅在设置了“表单” ID(可通过#form
选择器访问)的元素上触发“重置”事件。是的,一个id只能使用一次,这就是为什么他们将其称为“ id”,因为它明确地标识了一个元素。
这将无法处理表单输入字段具有非空默认值的情况。
像应该工作
$('yourdiv').find('form')[0].reset();
如果使用选择器并将值设置为空值,则不会重置表单,而是将所有字段都设置为空。从服务器端加载表单后,Reset是按照用户进行任何编辑操作之前的形式进行表单创建。如果输入名称为“ username”,并且该用户名是从服务器端预填充的,则此页面上的大多数解决方案都会从输入中删除该值,而不是将其重置为更改用户之前的值。如果您需要重置表单,请使用以下命令:
$('#myform')[0].reset();
如果您不需要重置表单,而是在所有输入中填充某个值(例如空值),则可以使用其他注释中的大多数解决方案。
简单,但就像魅力。
$("#form").trigger('reset'); //jquery
document.getElementById("myform").reset(); //native JS
如果有人仍在阅读此线程,这是不是使用jQuery,而是使用普通JavaScript的最简单解决方案。如果您的输入字段在表单内,则有一个简单的JavaScript reset命令:
document.getElementById("myform").reset();
有关此的更多信息: http //www.w3schools.com/jsref/met_form_reset.asp
干杯!
为什么完全需要使用任何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('');
});
.live()
已弃用,而且速度缓慢/不必要。您可以使用.bind()
或.on()
。
如果要清空所有输入框,而不论其类型如何,那么只需一分钟
$('#MyFormId')[0].reset();
使用Javascript,您只需使用以下语法即可 getElementById("your-form-id").reset();
您也可以通过以下方式调用reset函数来使用jquery $('#your-form-id')[0].reset();
记住不要忘记[0]
。如果您将收到以下错误
TypeError:$(...)。reset不是函数
jQuery还提供了可以使用的事件
$('#form_id')。trigger(“ reset”);
我试过了并且有效。
注意:务必注意,这些方法仅将表单重置为服务器在页面加载时设置的初始值。这意味着,如果您在进行随机更改之前将输入设置为“设置值”,则在调用reset方法后,该字段将被重置为相同的值。
希望能帮助到你
$('#editPOIForm').each(function(){
this.reset();
});
表单editPOIForm
的id
属性在哪里。
#editPOIForm
,因此该.each()
方法没有任何意义。即使您将此ID添加到多种形式,它也只会返回其中一种形式。
$('#editPOIForm').get(0).reset();
你为什么不使用document.getElementById("myId").reset();
?这是简单而漂亮的
最简单,最好的解决方案是-
$("#form")[0].reset();
不要在这里使用-
$(this)[0].reset();
form.reset();
则将重置为这些值,并且不会清除输入。
让我们说如果您想清除除accountType以外的字段,则平均时间下拉框中将重置为特定值,即“全部”。其余字段应重置为空即文本框。此方法将用于清除特定领域作为我们的要求。
$(':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';
}
});
我用这个:
$(".reset").click(function() {
$('input[type=text]').each(function(){
$(this).val('');
});
});
这是我的按钮:
<a href="#" class="reset">
<i class="fa fa-close"></i>
Reset
</a>
@using (Ajax.BeginForm("Create", "AcceptanceQualityDefect", new AjaxOptions()
{
OnSuccess = "ClearInput",
HttpMethod = "Post",
UpdateTargetId = "defect-list",
InsertionMode = InsertionMode.Replace
}, new { @id = "frmID" }))
frmID
是表格的标识OnSuccess
操作的名称称为“ ClearInput
” 的JavaScript函数
<script type="text/javascript">
function ClearInput() {
//call action for render create view
$("#frmID").get(0).reset();
}
</script>
如果您同时执行上述两项操作,那么您将无法使其停止工作...
如果我想清除除accountType以外的所有字段,请使用以下命令
$q(':input','#myform').not('#accountType').val('').removeAttr('checked').removeAttr('selected');
我在此处以及相关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()) })
请让我知道我是否缺少任何东西或可以改善的地方。
当页面包含对涉及IHttpHandler请求处理(captcha)的Web用户控件的调用时,上述方法都不适用。在发送requsrt(用于图像处理)之后,以下代码未清除表单上的字段(在发送HttpHandler request之前),所有内容均正常运行。
<input type="reset" value="ClearAllFields" onclick="ClearContact()" />
<script type="text/javascript">
function ClearContact() {
("form :text").val("");
}
</script>
我写了一个通用的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')。submit(function(){
var el = $(this);
$('<button type="reset" style="display:none; "></button>')
.appendTo(el)
.click()
.remove()
;
return false;
});