最简单的清空表单（form）方法

最新推荐文章于 2024-06-06 10:49:01 发布
最新推荐文章于 2024-06-06 10:49:01 发布
阅读量2.5w 收藏 5
点赞数 2
分类专栏： JavaScript 前端 HTML+CSS 文章标签： form input 表单重置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39767955/article/details/81508136
版权
前端 同时被 3 个专栏收录
39 篇文章 0 订阅
订阅专栏
JavaScript
20 篇文章 1 订阅
订阅专栏
HTML+CSS
14 篇文章 0 订阅
订阅专栏

新手菜鸟我在做项目的时候遇到了非常非常常见的需求：表单内容清空（充重置），相信有点点HTML+JavaScript的朋友都有办法做到，但我想能不能有代码最少、一步到位的的方法呢，我查了w3c后有了一下总结：

<html>
<head>
<script type="text/javascript">
function formReset()
  {
  document.getElementById("myForm").reset()
  }
</script>
</head>

<form id="myForm">
Name: <input type="text" size="20"><br />
Age: <input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="Reset">
</form>
</body>

</html>

在这里没有用到input的reset元素（input有哪些常见元素请看我的另一篇博客），而是用了更常见的button代替，用一个点击事件触发formReset（）方法，方法就一行代码，超级简单，就实现了清空重置的效果。

纳木错没有错
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
form表单重置、清空方法记录
weixin_30508241的博客
10-26 7096
myform 是form的id属性值 1.调用reset（）方法 1 function fomrReset() 2 { 3 document.getElementById("myform").reset(); 4 } 2. 逐个清空input、select值 1 function resetAll() { 2 $("#myform").find('...
微信小程序简单实现form表单获取输入数据功能示例
08-28
在formReset函数中，我们可以重置form表单的输入数据，并清空界面上的提示信息。 ```javascript formReset: function() { this.setData({ tip: '', userName: '', psw: '' }) } ``` 通过以上代码，我们可以实现...
清空表单的几种方式
weixin_60538045的博客
09-08 1772
如果直接用js提交后直接重置，有时候会报错，因为正在往后台传值的过程中，你就清空，会获取不到这个值。针对这种情况，你直接使用location.href="a.asp"就会自动清空所有的数据，因为location.href就是重定向刷新当前页面，数据什么的都会被清空的。2、如果action是跳转到当前页面处理，并使用js脚本返回前一页【history.go(-1)】，才会出现数据没有清空现象。1、如果是form表单上action直接提交到其他页面处理完了在跳回原来的页面的话，表单的文本框都会清空的。
uni-app 提交完表单，自动重置表单
最新发布
希默
06-06 876
uni-app 并没有给表单组件提供类似resetForm的 API，只能通过这两种方法实现，如果有其他方法，欢迎其一探讨。
清空数据表单
weixin_44552233的博客
06-27 436
很多时候我们在填写资料的过程中，会遇到资料错填，或者取消填写的情况。不仅有如上几种情况，还有提交表单的时候，表单提交了。数据还显示在页面上，下面我就给大家介绍下在MVVM编程模式中怎么清空数据表单。 我提交到数据库的表单是由一个个文本框组成的表单，也就是标签。 表单提交数据库是要绑定数据库的，所以我们首先要绑定数据。 因为要绑定数据，所以我们要声明属性。 例如我的项目需要绑定病人的数据，所以我在后台给病人表的实体属性 声明病人表实体属性之后，我们就可以去页面绑定数据了 在MVVM绑定数据需要用Binidi
如何清除form表单的数据
热门推荐
kahhy的博客
02-16 3万+
在我们平水写前台页面的时候，总是避免不了的要和表单打交道，在完成表单的提交，关闭，以及关联主题的切换时，我们都会有清除表单之前数据的需求，清除表单数据的方法有很多，但要根据具体的情况来采用合适的方法才会起到作用，下面，我在这里根据几种不同的情况来提供相应的方法。     1.在提交数据时清空表单中的数据      只需要执行$('#myform').reset();或是 submit(rese
【前端用法】form表单重置、清空方法记录
No8g攻城狮的博客
01-19 8294
首先：contact-form 是form的id属性值 方法一：调用reset（）方法 document.getElementById("contact-form")[0].reset(); 注意：网上说用document.getElementById("myform").reset();可以重置的，实际上并不能清空表单内容，因为用document.getElementById()或者do...
如何清空表单数据
LaoSiJi2367112677的博客
10-13 1769
1.$('#staticAddForm')[0].reset(); 2.如果无法清空数据，建议使用最直接的清除方式 //清空按钮绑定事件 $('#faultInfo_clear').bind('click',function(e){ $("#form").find('input[type=text]').val(''); $("#form").find('select').val(''); $("#form").find('textarea').val('');/...
jQuery表单插件ajaxForm实例详解
10-20
通过选择器`$('#button')`监听表单提交按钮的点击事件，并定义一个配置对象`options`，其中包含了提交请求的相关设置，如HTTP方法、URL、数据类型、是否清空表单以及是否重置表单等： ```javascript $('#button')...
微信小程序-form表单提交代码实例
10-17
微信小程序提供了简单的接口来实现表单的数据收集与提交。本文将详细解析微信小程序中的form表单提交功能，包括前端界面设计、表单数据绑定、事件处理等，并提供一个代码实例作为参考。 首先，微信小程序的form表单...
微信小程序---提交表单后清空输入框
03-29
最近有人问我提交表单后怎么把输入框的内容清空了。  这种方法不止一种， 1、可以用表单的重置功能。...2、可以用一个最简单的方法。 不需要设置重置属性，只需要在input中设置属性value   type=
清空表单标签js
03-25
清空表单标签js
清空form表单数据的两种方式
Awen_liang1002
06-16 2万+
方法1：遍历页面元素 /* 清空form表单内容  id：表单ID*/  function ClearForm(id) { var objId = document.getElementById(id); if (objId == undefined) { return; } for (var i = 0; i < objId.e
清空表单内容与初始化表单数据
Will_Season的博客
01-11 2260
在进行编辑的时候需要在打开form表单的时候对输入框赋值，那么赋值动作就是在created的时候进行的，这个初始值是在form表单created时确定的，如果在created的时候赋值了，resetFields()只是重置，重置为初始值。重置的是munted时候的值。解决办法：利用this.$nextTick()将赋值操作放到dom渲染结束之后。那么在以后的重置的时候都不会重置为空字符串。那么在以后重置的时候都不会重置为空字符串了。
前端清空表单数据的几种方式
xjh_527的博客
06-09 3422
第一种 : 清空表单 普通清空 用于修改 2中写法都行 this.refs.form.resetFields();this.refs.form.resetFields(); this.refs.form.resetFields();this.refs[‘form’].resetFields();
Vue开发日志：清空表单数据
HadesNyx
03-15 2204
对于Element UI等具有内置表单清空功能的库（第二种情况），使用自定义的清空函数可能不会触发表单控件的相应更新。如果表单数据对象中包含不需要清空的关联数据（如联动下拉框的选项数据），递归清空所有属性可能导致这些额外的数据也被意外清除。因此，在面对不同的表单场景时，应选择最适合且最简洁的方法来实现表单数据的清空，避免引入不必要的复杂性和风险。在Vue.js中，清空表单数据的方法可以根据你的表单绑定和使用的组件库有所不同。memo:这种方法的本质是，先引用准备好的方法，在合适的时机调用。
代码快速清空form参数值
dy1717的博客
03-21 262
快速清空form参数值
JS 提交表单后清空表单
a_靖的博客
06-23 1万+
开发交流QQ群:173683895 173683895 526474645 人满的请加其它群 清空表单是比较常见的场景，表单本身就有reset事件作用于清空表单，但是reset事件需要点击按钮才能触发，我们现在想不触达按钮在表单提交的submit事件内，当提交表单成功后清空表单中 value 。 下面来看代码，很简单 以微信小程序为示例 <!--index.wxml-...
elementUI清空弹框中的表单数据
Start2019
08-27 1万+
表单提交后，发现表单中的数据没有清空。两种实现方法...
vue中form表单怎么提交，请给出模板
06-12
在Vue中，可以使用`v-on:submit`或`@submit`指令来监听表单的提交事件，然后调用方法来处理表单提交的数据。以下是一个简单的表单提交示例： ```html <template> <form @submit.prevent="submitForm"> <label for="name">姓名：</label> <input type="text" id="name" v-model="name"> <label for="email">邮箱：</label> <input type="email" id="email" v-model="email"> <button type="submit">提交</button> </form> </template> <script> export default { data() { return { name: '', email: '' } }, methods: { submitForm() { // 处理表单提交的数据 console.log('姓名：', this.name) console.log('邮箱：', this.email) // 清空表单数据 this.name = '' this.email = '' } } } </script> ``` 在上面这个示例中，我们使用`@submit.prevent="submitForm"`指令来监听表单的提交事件，并且在`methods`中定义了`submitForm()`方法来处理表单提交的数据。在方法中，我们可以通过`this.name`和`this.email`来访问表单中的数据。最后，我们可以在方法中清空表单数据，以便下一次提交。 需要注意的是，`@submit.prevent`指令中的`.prevent`用于阻止表单默认的提交行为，即刷新页面。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值