Question

如何在表单中获取所有子元素（如radio，checkbox，select，text，...）并使用javascript将其设置为空白。我的表单有许多其他元素，如table，div等，但我不想改变这些其他元素。

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

非常感谢...

Answer 1

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

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

请参阅this jsfiddle

Answer 2

尝试这样的事情：

示例表单：

<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。

Answer 3

您应该考虑使用jQuery。它就像做：

一样简单

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

Answer 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

Answer 5

最简单的方法是在表单中添加一个重置按钮（根据KooiInc的回答），它会将所有控件恢复为默认值，而根本没有脚本：

<input type="reset">

你已经完成了。

如果必须使用脚本（天堂知道原因），请调用表单的reset方法：

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

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

var allControls = form.elements;

足够简单。： - ）

在J.S中获取表单的所有子元素

5 个答案: