在JS中获取表单的所有子元素答案

【问题标题】：get all child element of a form in J.S在JS中获取表单的所有子元素
【发布时间】：2011-09-14 10:32:53
【问题描述】：

如何获取表单中的所有子元素（如单选、复选框、选择、文本、...）并使用 javascript 将它们设为空白。我的表单有许多其他元素，例如 table、div 等，但我不想更改这些其他元素。

通过表单名称（frmlist）或表单id（frmlist）获取这些子元素（表单元素）并将它们留空的任何合适的想法。实际上我以前不知道表单中有多少元素以及这些元素的名称/ID是什么。

非常感谢...

【问题讨论】：

你有特别需要它是 JS 吗？重置按钮不够用吗？

标签： php javascript html dom

【解决方案1】：

试试这样的：

示例表格：

<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;
    }
}

来自Using Javascript to Reset or Clear Form。

【讨论】：

你好迈克尔·罗宾逊 frm_elements 是什么？是表单名称吗？
@BajrangLal：在我链接的教程中解释得很好

【解决方案2】：

有时我们会忘记旧的解决方案。为什么不在这里放弃 javascript 并使用：

<input type="reset" value = "CLEAR all"/>

见this jsfiddle

【讨论】：

实际上，当页面在同一页面上使用 php 提交时，重置按钮无法作为重置。我试过了。
我想这表明你的代码[其余部分]存在缺陷。
@Kooilnc - 如果按照他的原始问题，所有输入元素都是“空白”，这将起作用。不幸的是，type="reset" 会将表单重置为其原始状态，这意味着如果一个字段最初已经有一个值（不是用户输入的），它就不会是“空白”。
@Francois：我明白这一点。但是 OP 询问“我怎样才能在表单中获取 所有子元素（如 radio、checkbox、select、text、...） 并使用 javascript 将它们设为空白”
@Kooilnc - “空白”（或空）没有恢复默认值（这是重置按钮的作用。）

【解决方案3】：

您应该考虑使用jQuery。就像这样做一样简单：

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

【讨论】：

弗朗索瓦·德申斯！我该如何使用它？
访问 jQuery 的网站并下载它。下载后，在页面的 HEAD 中添加 <script type="text/javascript" src="path/to/jquery.min.js"></script>。然后，您需要向元素的事件添加一个函数以触发该函数。例如，如果您希望一个 ekement 在您单击它时触发该操作，您需要 $(function() { $('#buttonID').click(function() { ... }); }); 其中 #buttonID 是元素的 ID 属性值，而 ... 是上面的代码。当然，您希望将代码放在
@Jeff - 我没有忘记选择。所有 SELECT 元素的值都将设置为“”（一个空字符串）。 .not() 定义不包括的 :input 类型。 jQuery 将 :input 定义为任何输入元素，包括选择、文本区域、复选框等...

【解决方案4】：

使用以下函数获取所有表单元素

 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，功能思路来自quirksmode.org

【讨论】：

【解决方案5】：

最简单的方法是在表单中添加一个重置按钮（根据 KooiInc 的回答），它将所有控件返回到它们的默认值，根本不需要脚本：

<input type="reset">

你就完成了。

如果您必须使用脚本（天知道为什么），请调用表单的reset 方法：

<input type="button" value="Reset" onclick="this.form.reset()">

您问题的另一部分是如何在表单还包含其他元素时获取所有控件（表单必须包含块元素作为子元素才有效）。 HTML 表单元素有一个elements 集合，它是表单中的所有控件。这是一个简单的属性访问，不需要函数或过滤：

var allControls = form.elements;

足够简单。 :-)

【讨论】：