如何清除表格？

例如我有一个这样的表格：

<form method='post' action='someaction.php' name='myform'>

<input type='text' name='text1'>
<input type='text' name='text2'>

<input type='checkbox' name="check1">Check Me

<textarea rows="2" cols="20" name='textarea1'></textarea>

<select name='select1'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input type='reset' value='Reset' name='reset'>
<input type='submit' value='Submit' name='submit'>

</form>

当我按下Reset它清空所有字段。但是如果我使用 URL 参数填充一些字段，然后按Reset，它只清空我在表单重新加载后输入的字段。

无论某些字段在表单加载时是否已填充，如何清空所有字段。

正如其他人指出的那样，我认为您应该重新考虑是否需要blank表格。 但是，如果您确实需要该功能，这是一种方法：

简单的 JavaScript：

function resetForm(form) {
    // clearing inputs
    var inputs = form.getElementsByTagName('input');
    for (var i = 0; i<inputs.length; i++) {
        switch (inputs[i].type) {
            // case 'hidden':
            case 'text':
                inputs[i].value = '';
                break;
            case 'radio':
            case 'checkbox':
                inputs[i].checked = false;   
        }
    }

    // clearing selects
    var selects = form.getElementsByTagName('select');
    for (var i = 0; i<selects.length; i++)
        selects[i].selectedIndex = 0;

    // clearing textarea
    var text= form.getElementsByTagName('textarea');
    for (var i = 0; i<text.length; i++)
        text[i].innerHTML= '';

    return false;
}

请注意，我注释掉了清除的情况hidden输入。大多数时候，这是没有必要的。

为此，您需要从以下位置调用该函数onclick按钮的处理程序（或其他方式），例如像这样：

<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">

你可以在这里测试一切jsFiddle http://jsfiddle.net/m6bcs/.

如果您在项目中使用 jQuery，则可以使用更少的代码来完成此操作（并且无需更改 HTML）：

jQuery(function($) { // onDomReady

    // reset handler that clears the form
    $('form[name="myform"] input:reset').click(function () {
        $('form[name="myform"]')
            .find(':radio, :checkbox').removeAttr('checked').end()
            .find('textarea, :text, select').val('')

        return false;
    });

});

另外，请注意，我没有清除values隐藏的输入、复选框和单选按钮。

玩这个here http://jsfiddle.net/fmTDY/.