我正在寻找一个jQuery函数,它将在提交表单后清除表单的所有字段。
我没有要显示的HTML代码,我需要一些通用的东西。
你能帮我吗?
谢谢!
注意:此答案与重置表单字段有关,而不与清除字段有关-请参阅更新。
您可以使用JavaScript的本机reset()
方法将整个表单重置为其默认状态。
Ryan提供的示例:
$('#myForm')[0].reset();
注意:这可能不会重置某些字段,例如type="hidden"
。
更新
正如IlyaDoroshin指出的那样,使用jQuery可以完成相同的事情trigger()
:
$('#myForm').trigger("reset");
更新
如果您需要做的不只是将表单重置为默认状态,还应查看使用jQuery重置多阶段表单的答案。
要重置表单(但不清除表单),只需触发reset
事件:
$('#form').trigger("reset");
要清除表格,请参阅其他答案。
类似于的内容$("#formId").reset()
将无法清除将默认值设置为以外的表单项""
。发生这种情况的一种方法是提交先前的表单:提交reset()
表单后,会将表单值“重置”为先前提交的值,而可能不会""
。
清除页面上所有表单的一种方法是调用以下函数,只需按以下步骤执行即可clearForms()
:
function clearForms()
{
$(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
$(':checkbox, :radio').prop('checked', false);
}
如果要重置特定的表单,请按如下所示修改函数,并将其称为clearForm($("#formId"))
:
function clearForm($form)
{
$form.find(':input').not(':button, :submit, :reset, :hidden, :checkbox, :radio').val('');
$form.find(':checkbox, :radio').prop('checked', false);
}
最初访问此页面时,我需要一个解决方案,该解决方案考虑到更改了表单默认值并且仍然能够清除所有输入项。
请注意,这不会清除placeholder
文本。
设置val
为“”
function clear_form_elements(ele) {
$(ele).find(':input').each(function() {
switch(this.type) {
case 'password':
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}
<input onclick="clear_form_elements(this.form)" type="button" value="Clear All" />
<input onclick="clear_form_elements('#example_1')" type="button" value="Clear Section 1" />
<input onclick="clear_form_elements('#example_2')" type="button" value="Clear Section 2" />
<input onclick="clear_form_elements('#example_3')" type="button" value="Clear Section 3" />
您也可以尝试如下操作:
function clearForm(form) {
// iterate over all of the inputs for the form
// element that was passed in
$(':input', form).each(function() {
var type = this.type;
var tag = this.tagName.toLowerCase(); // normalize case
// it's ok to reset the value attr of text inputs,
// password inputs, and textareas
if (type == 'text' || type == 'password' || tag == 'textarea')
this.value = "";
// checkboxes and radios need to have their checked state cleared
// but should *not* have their 'value' changed
else if (type == 'checkbox' || type == 'radio')
this.checked = false;
// select elements need to have their 'selectedIndex' property set to -1
// (this works for both single and multiple select elements)
else if (tag == 'select')
this.selectedIndex = -1;
});
};
<form id="form" method="post" action="action.php">
<input type="text" class="removeLater" name="name" /> Username<br/>
<input type="text" class="removeLater" name="pass" /> Password<br/>
<input type="text" class="removeLater" name="pass2" /> Password again<br/>
</form>
<script>
$(function(){
$("form").submit(function(e){
//do anything you want
//& remove values
$(".removeLater").val('');
}
});
</script>
You can simply use the reset
button type.
<input type="text" />
<input type="reset" />
jsfiddle
Edit: Remember that, the reset
button, reset the form for the original values, so, if the field has some value set on the field <input type="text" value="Name" />
after press reset
the field will reset the value inserted by user and come back with the word "name" in this example.
Reference: http://api.jquery.com/reset-selector/
I use following solution:
1) Setup Jquery Validation Plugin
2) Then:
$('your form's selector').resetForm();
function reset_form() {
$('#ID_OF_FORM').each (function(){
this.reset();
});
}
the trigger idea was smart, however I wanted to do it the jQuery way, so here is a small function which will allow you to keep chaining.
$.fn.resetForm = function() {
return this.each(function(){
this.reset();
});
}
Then just call it something like this
$('#divwithformin form').resetForm();
or
$('form').resetForm();
and of course you can still use it in the chain
$('form.register').resetForm().find('input[type="submit"]').attr('disabled','disabled')
Would something like work?
HTML
<form id="contactform"></form>
JavaScript
var $contactform = $('#contactform')
$($contactform).find("input[type=text] , textarea ").each(function(){
$(this).val('');
});
简单快捷的功能清除所有字段
文章标签:javascript , jquery
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!