Is there a predefined method to reset all elements in a (X)HTML document?

Like one can do with a form:

document.forms[0].reset();

But im not using a form as am开发者_StackOverflow using AJAX.. Will I have to cycle through all elements using JavaScript?

A quick and dirty trick would be to wrap the fields of the document in a form tag but make the onsubmit event return false, like so...

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

This way the form will not submit but you can run...

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

...on it resetting all field within.

But really you should put your AJAX enabled fields in a form tag anyway as that would be graceful degradation.

You should always use an HTML <form> element - even (and especially) if you're using AJAX. It will be more usable, accessible, and will make your life as a developer easier. Do a Google search for "ajax graceful degradation" or "accessible ajax" if you don't believe me; it's actually pretty easy.

For example, here's an AJAX form that degrades gracefully using jQuery, the greatest JavaScript library on earth:

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

No, but it turns out its v. easy with a function once you have given your input elements a 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 
    }
  }
}

Of course you could also use:

getElementsByTagName("INPUT")

But then you have to check type === "text" otherwise your buttons and other input elements will have their value cleared too.

Add a form. Make it work without JavaScript. Progressively enhance it so that JavaScript overrides the normal functionality.

More users will be able to use the page, and you won't have to try to hack associated functionality back in.