是否有预定义的方法来重置 (X)HTML 文档中的所有元素？

Question

就像一个表格可以做的那样：

document.forms[0].reset();

但我没有像使用 AJAX 那样使用表单。我是否必须使用 JavaScript 循环遍历所有元素？

Answer 1

一个快速而肮脏的技巧是将文档的字段包装在一个表单标签中，但让 onsubmit 事件返回 false，就像这样......

<form id="form_resetter" onsubmit="return false;">
...
</form>

这样表单不会提交但你可以运行...

document.getElementById('form_resetter').reset() 

...在它上面重置所有字段。

但实际上，您应该将启用 AJAX 的字段放在表单标签中，因为这将是优雅的降级。

Answer 2

不，但是一旦你给你的输入元素一个类名，它就会变得很容易：

function clearInput() {
  var fields = document.getElementsByClassName("inputFields");
  for(var i = 0; i < fields.length; i++) {
    switch(fields[i].tagName)
    {
      case "INPUT": fields[i].value = null; break;
      case "SELECT": fields[i].selectedIndex = 0; break; // ASSUMPTION: 0 is the default 
    }
  }
}

当然你也可以使用：

getElementsByTagName("INPUT")

但是你必须检查 type === "text" 否则你的按钮和其他输入元素的值也会被清除。

Answer 3

添加表单。 Make it work without JavaScript。逐步增强它，以便 JavaScript 覆盖正常功能。

更多用户将能够使用该页面，您不必尝试重新破解相关功能。

Answer 4

您应该始终使用 HTML <form> 元素 - 即使（尤其是）您使用 AJAX。它将更实用、更易于访问，并使您作为开发人员的生活更轻松。如果您不相信我，请在 Google 上搜索“ajax 优雅降级”或“可访问的 ajax”；其实很简单。

例如，下面是一个使用地球上最伟大的 JavaScript 库 jQuery 优雅降级的 AJAX 表单：

<form method="post" action="ajax/test.html" name="ajax-form" id="ajax-form">
  <fieldset>
    <legend>Form name</legend>
    <p><label for="username">Username: <input type="text" name="username" id="username" value="" /></label></p>
    <p><label for="password">Password: <input type="password" name="password" id="password" value="" /></label></p>
    <p>
      <label for="option-a">Option A: <input type="radio" name="options" id="option-a" value="a" /></label><br/>
      <label for="option-b">Option B: <input type="radio" name="options" id="option-b" value="b" /></label><br/>
      <label for="option-c">Option C: <input type="radio" name="options" id="option-c" value="c" /></label>
    </p>
    <p>
      <label for="select-box">Select Box:
        <select name="select-box" id="select-box" size="1">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </label>
    </p>
    <p class="buttons"><button type="submit">Submit</button> <button type="reset">Reset</button></p>
  </fieldset>
</form>

<script type="text/javascript">
$().ready(function() {
    var $ajaxForm = $('#ajax-form');

    // Create container to store ajax result
    $ajaxForm.find('.buttons').after($('<p class="result"/>'));

    // Bind event handler
    $ajaxForm.bind('submit', function(event, data) {
        // Simple ajax POST request
        // See http://api.jquery.com/jQuery.post/
        $.post($ajaxForm.attr('action'), 'ajax=1&' + $ajaxForm.serialize(), function(data) {
            $('.result').html(data);
        });

        // Disable default form submit behavior
        return false;
    });

    // Bind click handler to override "reset" behavior...
    // Although this really isn't necessary if you're using the HTML <form> element, which you should be...
    $ajaxForm.find('button:reset').bind('click', function(event, data) {
        var $els = $ajaxForm.find('input, textarea, select');
        $els.filter('input:text, input:password, textarea').val('');
        $els.filter('input:radio, input:checkbox').attr('checked', false);
        $els.filter('select').attr('selectedIndex', '');
        return false;
    });
});
</script>

<style type="text/css">
fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}
fieldset legend {
    display: none;
}
</style>