手工实现表单重置的部分功能

皇甫端
• 阅读 2691

首先我必须说几乎所有的人都不需要自己实现表单重置的功能,表单重置功能只需要一个reset类型的input就足够了。<input type="reset" />

当你万不得已时,不妨考虑下我下面的做法,但必须做下提醒,以下代码不可取,而当你的表单中使用到的控件不多时,或者你有其他办法时,那么就无须浪费时间阅读下面的代码了

function resetForm(ele) {
    $(ele).closest('table').find('input, select').val(function(){
        if(this.tagName == 'SELECT'){
            var options = this.options;
            var that = this;
            for(var i = 0; i < options.length; i++) {
                if(options[i].defaultSelected){
                    return options[i].value;
                }
            }
            return options[0].value;
        }
        return this.defaultValue;
    }); 
}

我先放上来我正在使用的代码,需要引入jQuery,因此就没有通用性,另外代码中还包含JavaScript原生代码,两种混杂属不可取的地方

resetForm方法在HTML代码中调用大概是:
<input type="button" onclick="resetForm(this)" />

resetForm方法中只尝试将inputselect重置为默认值,input类型的比较简单,直接取该对象的defaultValue(此处我竟然不知道这个对象是不是DOM对象);对于select类型需要对它的所有option进行遍历,判断是否是默认选择(defaultSelected),然后返回该option的值。实际上如果知道哪个option是默认选择项,也可以将option的序号赋值给select对象的selectedIndex属性而达到重置的效果。

表单中还可能使用radiocheckbox等控件,这里并没有打算拓展resetForm功能,不过我认为,这些控件都可以通过它们的默认值(defaultValue)或者默认选择(defaultSelected)相关信息进行重置吧。
(还真无聊)

点赞
收藏
评论区
推荐文章
菜鸟阿都 菜鸟阿都
3年前
django使用第三方模块实现重置密码功能
&ensp;&ensp;&ensp;&ensp;为大家介绍一个django开发的利器,重置密码模块:djangopasswordreset,使用起来非常方便,但网上的相关资料很少,本人第一次使用,遇到了坑很深,所以特意和大家分享一下。&ensp;&ensp;&ensp;&ensp;用django开发网站是个很方便的,并且有大量的第三方模块可以调用,djang
Jacquelyn38 Jacquelyn38
4年前
手把手教你用前端实现短视频App(滑动切换)
前言平常在玩短视频App时,喜欢看的视频可以多看一会,不喜欢看的视频直接往上一划,这个功能一直深受用户喜爱。今天我们不妨实现一个这样功能的App。功能1.上下滑动切换视频2.可查看对应视频下的评论示例下面我挑出了几张代表性的图片,供大家参考。1.2.3.下载链接以上是我自己做的一款App
Wesley13 Wesley13
3年前
Volley解析之表单提交篇
要实现表单的提交,就要知道表单提交的数据格式是怎么样,这里我从某知名网站抓了一条数据,先来分析别人提交表单的数据格式。 数据包:Connection:keepaliveContentLength:123XRequestedWith:ShockwaveFlash/16.0.0.296UserAge
前端配置化表单组件设计方法 | 京东云技术团队
前端开发中涉及表单的页面非常多,看似功能简单,开发快速,实则占去了很大一部分时间。当某个表单包含元素过多时还会导致html代码过多,vue文件过大。从而不容易查找、修改和维护。为了提高开发效率及降低维护成本,下面介绍表单配置化组件的封装原理与封装方法。
Wesley13 Wesley13
3年前
Activiti 工作流表单设计及开发
一、前言      Activiti5对表单的支持目前还是比较弱的,表现在对表单的开发还需要写Freemark模板,并且它的模板还需要跟class文件一起打包发布。这使得流程的表单设计必须由开发人员来开发处理。因而,开发一套易用性强的流程表单功能就显得很有必要。二、需求      用户一般
Stella981 Stella981
3年前
DataGear 制作支持表单交互操作和多图表联动的数据可视化看板
对于数据可视化,有时需要根据用户输入的查询条件展示限定范围的数据图表,DataGear(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.datagear.tech)的看板表单功能可以快速方便地实现此类需求。下面的看板示例,包含一个柱状图、一个饼图和一个地图,用户可以通过看板表单
Wesley13 Wesley13
3年前
Spread for Windows Forms高级主题(7)
表单打印的多个部分都可以进行自定义,大多数的自定义选项存在于PrintInfo对象中。大多数打印选项是在PrintInfo对象上进行设置,并在表单级别上应用。当你执行打印操作时,你将一个特定的表单发送给使用这些设置的打印机。如果你想为不同的表单使用不同的打印设置,那么你可能需要重置PrintInfo对象,然后在表单打印的间隔内做必要的修改。深入理解打
Stella981 Stella981
3年前
Joomla网站怎么创建表单
网站的类型有好多种,比如企业网站,品牌网站,电商网站,营销网站,个人博客站等等,网站的作用是向用户展示自己的信息,当然绝大数网站也需要希望通过用户提交表单来收集用户信息,那么Joomla网站中怎么创建一个表单用来收集用户提交的信息呢?接下来我就来简述下大体流程。 首先我来介绍一个插件,RsForm,用于创建表单和管理用户提交信息。下载并安装Rsfor
Stella981 Stella981
3年前
Django具体操作(三)
理解表单类:上一篇中讲到了用户登录代码实现,用户登录框可以用HTML代码实现或者是表单实现。在.个人的app下创建forms.py(这里很多人会写成from)这个文件是专门存放各种与表单有关的类。classFoo(Form):必须继承usernamexxxpasswordxxx
Stella981 Stella981
3年前
Gemini.Workflow 双子工作流入门教程五:业务表单开发
简介:Gemini.Workflow双子工作流,是一套功能强大,使用简单的工作流,简称双子流,目前配套集成在Aries框架中。下面介绍本篇教程:业务表单开发。业务表单开发业务表单的开发,和在Aries中开发普通的表单页面,是一致的,不过有些小区别,这里介绍一下:1、引用工作流脚本:
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(