form 表单元素重置(reset)解决方案

最新推荐文章于 2025-07-24 12:19:53 发布

转载最新推荐文章于 2025-07-24 12:19:53 发布 · 8k 阅读

文章标签：

#input #javascript #button #forms #action #function

HTML JS 网页设计学习与技巧专栏收录该内容

178 篇文章

订阅专栏

本文介绍了一种使用JavaScript解决有初始值的form表单在点击Reset按钮时无法清空的问题。通过自定义函数clearForm，可以将表单元素值清空而非恢复到初始状态。

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

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

--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------

Javascript:


  
    
      
    

    
     <script language=
     "JavaScript" type=
     "text/javascript"> 
    

    
     <!-- 
    

    
     // 说明：有初始值的 form 表单元素重置(reset)解决方案 
    

    
     // 整理：http://www.CodeBit.cn 
    

    
      
    

    
     function clearForm
     (formName
     ) 
     { 
    

        
     var formObj = document.
     forms
     [formName
     ]; 
    

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

        
     } 
    

    
     } 
    

    
     //--> 
    

    
     </script>

示例：
HTML:


  
    
      
    

    
     <form method="post" action="" name="testForm"> 
    

    
      
    

        
     <input type="text" value="text" size="30" /> 
     <br /> 
    

        
     <textarea name="" rows="3" cols="30">textarea
     </textarea> 
     <br /> 
    

    
         a
     <input type="checkBox" name="a" value="a" /> 
    

    
         b
     <input type="checkBox" name="a" value="b" checked="checked" /> 
    

    
         c
     <input type="checkBox" name="a" value="c" checked="checked" /> 
    

    
         d
     <input type="checkBox" name="a" value="d" /> 
    

    
         e
     <input type="checkBox" name="a" value="e" /> 
     <br /> 
    

    
         2
     <input type="radio" name="b" value="2" /> 
    

    
         3
     <input type="radio" name="b" value="3" checked="checked" />
     <br /> 
    

    
      
    

    
         test1:
     <select name="" multiple="multiple"> 
    

            
     <option value="11111111">11111111
     </option> 
    

            
     <option value="22222222" selected="selected">22222222
     </option> 
    

            
     <option value="33333333" selected="selected">33333333
     </option> 
    

            
     <option value="44444444">44444444
     </option> 
    

            
     <option value="55555555">55555555
     </option> 
    

        
     </select> 
    

    
      
    

        
     <br />
     <br /> 
    

    
      
    

    
         test2:
     <select name=""> 
    

            
     <option value="11">11
     </option> 
    

            
     <option selected="selected">22
     </option> 
    

            
     <option value="33">33
     </option> 
    

            
     <option value="44">44
     </option> 
    

            
     <option value="55">55
     </option> 
    

        
     </select> 
    

    
      
    

        
     <br />
     <br /> 
    

    
      
    

        
     <input type="submit" value="Submit" /> 
    

        
     <input type="reset" value="Reset" /> 
    

        
     <input type="button" value="Button" /> 
    

    
      
    

        
     <input type="button" value="Javascript Clear" onclick="clearForm('testForm')" /> 
    

    
      
    

    
     </form>