在J.S中获取窗体的所有子元素
get all child element of a form in J.S
如何获取表单中的所有子元素(如radio、checkbox、select、text…),并使用javascript将其留空。我的表单有许多其他元素,如table、div等,但我不想更改这些其他元素。
通过表单名称(frmlist)或表单id(frmllist)获取这些子元素(表单元素)并使其为空的任何合适想法。事实上,我以前不知道形式中有多少元素,这些元素的名称/id是什么。
非常感谢。。。
试试这样的东西:
示例形式:
<form name="data_entry" action="#">
Company Name: <input type="text" name="company_name">
Select Business Type: <input type="radio" name="business_category" value="1"> Manufacturer
<input type="radio" name="business_category" value="2"> Whole Sale Supplier
<input type="radio" name="business_category" value="3"> Retailer
<input type="radio" name="business_category" value="4"> Service Provider
Email Address: <input type="text" size="30" name="email">
Keep Information Private: <input type="checkbox" name="privacy">
<input type="button" name="reset_form" value="Reset Form" onclick="this.form.reset();">
<input type="button" name="clear" value="Clear Form" onclick="clearForm(this.form);">
</form>
示例Javascript:
for (i = 0; i < frm_elements.length; i++) {
field_type = frm_elements[i].type.toLowerCase();
switch (field_type) {
case "text":
case "password":
case "textarea":
case "hidden":
frm_elements[i].value = "";
break;
case "radio":
case "checkbox":
if (frm_elements[i].checked) {
frm_elements[i].checked = false;
}
break;
case "select-one":
case "select-multi":
frm_elements[i].selectedIndex = -1;
break;
default:
break;
}
}
从使用Javascript重置或清除窗体。
有时我们会忘记旧的解决方案。为什么不放弃这里的javascript并使用:
<input type="reset" value = "CLEAR all"/>
请参阅此jsfiddle
您应该考虑使用jQuery。这就像做一样简单
$(':input')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
使用以下函数获取所有表单元素
function getAllFormFields(node)
{
var allFormFields = new Array;
var x = node.getElementsByTagName('input');
for (var i=0;i<x.length;i++)
allFormFields.push(x[i]);
var y = node.getElementsByTagName('option');
for (var i=0;i<y.length;i++)
allFormFields.push(y[i]);
return allFormFields;
}
我一直在查看quiksmode.org,函数思想来自quiksmode.org
最简单的方法是在表单中添加一个重置按钮(根据KooiInc的回答),它将使所有控件返回到默认值,而不需要任何脚本:
<input type="reset">
你就完了。
如果必须使用脚本(天知道为什么),请调用表单的重置方法:
<input type="button" value="Reset" onclick="this.form.reset()">
问题的另一部分是,当表单中还包含其他元素时,如何获取表单中的所有控件(表单必须包含块元素作为子元素才能有效)。HTML表单元素有一个元素集合,它是表单中的所有控件。这是一个简单的属性访问,不需要函数或过滤:
var allControls = form.elements;
很简单。:-)
我知道这是一个老问题,但如果有人来搜索,在他的情况下,一个更快的oneliner代码是:
$('#frmlist')[0].reset()
注意数组访问器[0]
。返回的元素是frmlist表单,然后对其调用reset()
。这会将表单中的所有字段重置为默认值。
相关文章:
- 如何首先设置样式<td>表中包含在窗体中的元素
- 如何将窗体的子元素居中
- 显示内部窗体元素
- 如何将表行传递到具有所有输入元素的隐藏窗体
- 显示或隐藏窗体元素
- 从 Zend 窗体元素中删除 id 属性
- 不要在窗体序列化时将元素包含在 ng-hide 中
- 窗体内部元素的 addEventListener
- 按类从窗体中删除元素
- 如何将元素附加到 iframe 窗体
- 从具有特定类的第一个输入中获取父窗体元素
- 背景淡入淡出,将焦点留在弹出窗体/元素上
- iPhone/iPad上的自动对焦窗体元素
- 具有用户添加的行的窗体,以及对每行的输入元素查找
- 如何将元素附加到Shadowbox中的窗体中
- 如何填充一个新的窗口窗体元素
- AngularJS $编译的元素不会被添加到它们所在的窗体中
- 当事件发生时(当单击来自另一个表单的另一个按钮时),使用EJS添加HTML元素(窗体中的按钮)
- 窗口滑块在被窗体元素包围时失败
- 访问窗体的最后一个输入元素