代码之家 › 专栏 › 技术社区 › markmnl

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

xhtml dom ajax html javascript

markmnl · 技术社区 · 14 年前

就像一个人可以用一张表格:

document.forms[0].reset();

但我并没有像使用Ajax那样使用窗体。我需要使用javascript循环浏览所有元素吗?

4 回复 | 直到 14 年前

Daniel Doezema 14 年前

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

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

Andy Dvorak 14 年前

<form>

jQuery

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

markmnl 14 年前

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")

Quentin 14 年前

Make it work without JavaScript