如何清除表单？ [英] How to clear a form?

问题描述

例如，我有一个这样的表单：

 < 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 =2cols =20name ='textarea1 >< / textarea的> 
 
< select name ='select1'> 
< option value =volvo>沃尔沃< / option> 
< option value =saab> Saab< / option> 
< option value =mercedes> Mercedes< / option> 
< option value =audi> Audi< / option> 
< / select> 
 
< input type ='reset'value ='重置'name ='reset'> 
< input type ='submit'value ='Submit'name ='submit'> 
 
< / form> 
  

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

如何清空所有字段，无论字段是否已经在表单加载时填充。解决方案

正如其他人指出的那样，我认为您应该重新考虑空白这个表单的需求。
但是，如果您确实需要这种功能，则可以这样做：

纯Javascript：

  function resetForm（form）{
 //清除输入
 var inputs = form.getElementsByTagName（'input'）; 
 for（var i = 0; i< inputs.length; i ++）{
 switch（inputs [i] .type）{
 // case'hidden'：
 case 'text'：
 inputs [i] .value =''; 
休息; 
 case'radio'：
 case'checkbox'：
 inputs [i] .checked = false; 
} 
} 
 
 //清除选择
 var selects = form.getElementsByTagName（'select'）; 
 for（var i = 0; i< selects.length; i ++）
选择[i] .selectedIndex = 0; 
 
 //清除textarea 
 var text = form.getElementsByTagName（'textarea'）; 
 for（var i = 0; i< text.length; i ++）
 text [i] .innerHTML =''; 
 
返回false; 
} 
  

请注意，我已清除了隐藏输入。大多数情况下，这是没有必要的。

为此，您需要从 onclick



 < input type ='reset'value ='Reset'name ='reset'onclick =return resetForm （this.form）;> 
  

你可以在这里测试它 jsFiddle 。

如果您在项目中使用jQuery，则可以使用更少的代码改变HTML）：

$ $ p $ jQuery（function（$）{// onDomReady

// reset处理程序清除表单
$（'form [name =myform] input：reset'）。click（function（）{
$（'form [name =myform]'）
.find（'：radio，：checkbox'）。removeAttr（'checked'）。end（）
.find（'textarea，：text，select'）。val（''）

返回false;
}）;

}）;


另外，请注意，我不清除隐藏输入的值复选框和单选按钮。

使用此此处

a>。

For example I have a form like this:

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

When I press Reset it empties all fields. But if I populate some fields using URL params and then press Reset, it only empties fields which I enter after form reload.

How can I empty all fields whether some fields are already populated at the time of form load.

解决方案

As others pointed out, I think you should reconsider the need to blank the form. But, if you really need that functionality, this is one way to do it:

Plain 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;
}

Note that I commented out the case in which I clear the hidden inputs. Most of the time, this is not necessary.

For this to work, you need to call the function from the onclick handler of a button (or some other way), e.g. like this:

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

You can test it all here on jsFiddle.

If you use jQuery in your project, you can do this with much less code (and no need to change the 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;
    });

});

Also, note that I do not clear the values of hidden inputs, check-boxes and radio buttons.

Play with this here.

这篇关于如何清除表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！