在J.S中获取窗体的所有子元素

get all child element of a form in J.S

本文关键字：元素 窗体 获取      更新时间：2023-09-26

如何获取表单中的所有子元素（如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()。这会将表单中的所有字段重置为默认值。

相关文章：