Существует ли предопределенный метод для сброса всех элементов в (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

Вы должны всегда использовать элемент HTML <form> - даже (и особенно), если вы используете AJAX. Он станет более удобным, доступным и облегчит вашу жизнь разработчика. Если вы не верите мне, сделайте в Google поиск по запросу «изящная деградация ajax» или «доступный ajax»; это на самом деле довольно легко.

Например, вот форма AJAX, которая изящно деградирует с помощью jQuery , самой большой библиотеки JavaScript в мире:

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

Answer 3

Добавить форму. Заставить его работать без JavaScript .Постепенно улучшайте его, чтобы JavaScript перекрывал нормальную функциональность.

Больше пользователей смогут пользоваться страницей, и вам не придется пытаться взломать связанные функции обратно.

Answer 4

Нет, но получается, что с функцией легко справиться, как только вы дадите своим элементам ввода className:

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", иначе ваши кнопки и другие элементы ввода тоже будут очищены.