Reset form全部

最新推荐文章于 2024-04-07 13:15:26 发布

原创最新推荐文章于 2024-04-07 13:15:26 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

javascript 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种使用JavaScript来清空HTML表单的方法，通过遍历表单元素并重置其值，使得Reset按钮可以真正清空表单，而不是恢复到初始值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有初始值的 form 表单在点击默认的 Reset 按钮时，表单元素并不能清空，而是恢复初始值，相信这并不是我们期望的，本文介绍的是用 javascript 解决这一问题的方法


<form name="testForm">
    <input type="button" value="Javascript Clear" onclick="clearForm('testForm')" /> 
</form> 
function clearForm(formName) {    
var formObj = document.newApplForm;    
   var formEl = formObj.elements;     
   for (var i=0; i<formEl.length; i++){     
       var element = formEl[i];        
        if (element.type == 'submit') { continue; } 
        if (element.type == 'reset') { continue; }      
        if (element.type == 'button') { continue; }       
       // if (element.type == 'hidden') { continue; }     
        if (element.type == 'text') { element.value = ''; } 
        if (element.type == 'textarea') { element.value = ''; } 
        if (element.type == 'checkbox') { element.checked = false; }    
        if (element.type == 'radio') { element.checked = false; } 
        if (element.type == 'select-multiple') { element.selectedIndex = -1; }
        if (element.type == 'select-one') { element.selectedIndex = -1; }   
      } 
}