如何清除表格？

Question

例如,我有一个这样的表格:

<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,它只会清空我在表单重新加载后输入的字段.

如何在表单加载时填充某些字段时,如何清空所有字段.

Answer 1

正如其他人指出的那样,我认为你应该重新考虑的必要空白表单.但是,如果您确实需要该功能,这是一种方法:

普通的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上测试它.

如果在项目中使用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;
    });

});

另外请注意,我不清除值的隐藏输入,入住框和单选按钮.

玩这个在这里.

Answer 2

在jquery中,您可以使用,

$("#yourFormId").trigger('reset'); 

Answer 3

你必须通过javascript清除它们(或清除服务器端).

该reset按钮仅将表单元素重置为其初始值 - 如果这是一个特定值,那么它将被重置为.