element form表单提交数据之后清空所有输入框

最新推荐文章于 2023-09-11 11:34:55 发布
最新推荐文章于 2023-09-11 11:34:55 发布
阅读量3.2k 收藏 3
点赞数 2
文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HouMengFei_/article/details/117475398
版权

element form表单提交数据之后清空所有输入框

首先el-form标签上的ref属性名和调方法名统一，还有要绑定所有表单数据的一个大对象就是 :model属性，然后prop属性绑定的值要和v-mode绑定的值要统一
在这里插入图片描述

然后在提交数据成功之后加上下面这句话就可以在提交之后重置表单数据

this.$refs.form.resetFields()
HouMengFei_
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
uniapp使用from表单提交后清空input输入内容的正确方法
君笑尘的技术博客
03-29 8660
做小程序开发的时候，经常使用到from表单提交，但是提交后input输入的内容却没有办法清楚。 搜索了一下后发现大家在微信小程序原生开发的方案都是给input的value设置一个默认值inputName，然后在提交成功后，把inputName通过this.setData 设置为空 //直接将input值设置空 this.setData({ inputName: '' }) 但是在uniapp上这样做，并不会改变input输入的内容，尝试改用了: this.inputNam
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
主要介绍了vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Bug解决：ElementUI提交表单返回成功后自动清空表单的值
TuPonShuy的博客
07-29 2038
vue+elementui
如何清除form表单的数据
热门推荐
kahhy的博客
02-16 3万+
在我们平水写前台页面的时候，总是避免不了的要和表单打交道，在完成表单的提交，关闭，以及关联主题的切换时，我们都会有清除表单之前数据的需求，清除表单数据的方法有很多，但要根据具体的情况来采用合适的方法才会起到作用，下面，我在这里根据几种不同的情况来提供相应的方法。     1.在提交数据时清空表单中的数据      只需要执行$('#myform').reset();或是 submit(rese
form表单提交时自动清空表单内容
最新发布
weixin_66196770的博客
09-11 889
是由于form表单中，button的type属性默认是submit，当type的值是submit时，点击button就会自动刷新。手动设置type字段的值就解决了，即type=“button”.（推荐）此时只要点击提交按钮就会发现表单数据会被直接清空，这是因为form中的button默认为submit，默认会被解读为提交表单，而我这里只是想发个验证码。把button标签换成a标签，这样就可以了；
提交form后，清空form内input值
b809220024的博客
06-17 2万+
经常要用到的一个功能，新增一行数据，但是新增完成后，原来填的值会继续留在上面。 比如下图的tt，第二次打开依旧存在 jquery下，用form表单提交$(‘#form’).submit()那么，就可以简单的用$(‘#form’).reset() 不过我用ajax提交的时候没用form的表单提交功能，所以想了想，手动清除$("#form_sample_eventAdd input").val
对于Form表单reset方法的新认识
12-09
在HTML的Form表单中，`reset`方法是一个至关重要的功能，它允许用户撤销他们在表单中的所有修改，恢复到初始状态。这个方法通常与一个重置按钮关联，当用户点击该按钮时，表单的所有输入字段将被重置。然而，关于`...
form:获取、赋值form表单
05-18
在JavaScript编程中，`form`表单是网页交互的核心元素，用于收集用户输入的数据并进行提交。本篇文章将深入探讨如何获取、赋值以及初始化HTML中的`form`表单。 一、获取`form`表单 在JavaScript中，有多种方式可以...
清除HTML表单问题
04-03
这个函数通过遍历指定ID的表单的所有元素，根据元素类型（文本、电子邮件、密码、多行文本、复选框或单选按钮）清空或重置其值。你可以根据需要调用`clearForm`函数来实现动态的表单清除。 此外，CSS（级联样式表）...
vue-ele-form源码
08-09
2. **Element UI集成**：vue-ele-form与Element UI组件库紧密结合，Element UI提供了一系列美观且实用的UI组件，如输入框、下拉选择、日期选择器等，使得表单的样式和交互体验更加一致。 3. **表单验证**：vue-ele-...
FORM-Builder常用函数.doc
01-27
23. `commit_form`: 提交表单中的更改至数据库，确保数据同步。 24. `convert_other_value`: 将下拉列表、圆钮组或检查框的值转换为与当前项状态相符的值。 25. `copy`: 复制一个变量的值到另一个变量，实现数据的...
vue3 antd项目实战——Form表单的重置【使用resetFields()重置form表单数据、清空输入框】
XSL_HR的博客
12-31 1万+
ant design vue组件库中的form表单有一个自带的重置函数——resetFields()。本期文章将借助resetFields函数，实现form表单的重置与清空。
清空表单的几种方式
weixin_60538045的博客
09-08 1678
如果直接用js提交后直接重置，有时候会报错，因为正在往后台传值的过程中，你就清空，会获取不到这个值。针对这种情况，你直接使用location.href="a.asp"就会自动清空所有的数据，因为location.href就是重定向刷新当前页面，数据什么的都会被清空的。2、如果action是跳转到当前页面处理，并使用js脚本返回前一页【history.go(-1)】，才会出现数据没有清空现象。1、如果是form表单上action直接提交到其他页面处理完了在跳回原来的页面的话，表单的文本框都会清空的。
Element-ui—el-form 清空表单内容的问题
m0_37616866的博客
11-23 771
el-form 表单清空问题
el-element表单el-form使用resetFields清空进行初始化
migexiaoliang的博客
12-07 2660
el-element表单el-form使用resetFields清空进行初始化 我们一般使用带表单的弹窗时，有时候新建完成再次打开或者填写完数据不保存去关闭表单，再次打开会保留之前的填写。 想要点击取消按钮、点击关闭按钮清空数据，可以使用element的 1、el-form 里 加上 ref=‘form’；2、表单项 加上 prop=“name”；3、this.$refs[‘form’].resetFields() // 清空表单
Vue el-form 表单清空 初始化
u012174809的专栏
12-21 4528
如果用手写属性值=undefined 会带来副作用影响，比如下次打开，这个属性没了，然后页面无法写入，或是选择项出现validate校验error ，这并不是我们想要的效果，推荐 使用官方已经定义好的 resetFields 它需要具备三个条件，才能成功初始化。 1.el-form 里 加上 ref='form' 2.表单项 加上 prop="name" 3.this.$refs['form'].resetFields() // 清空表单 ...
清空el-form表单数据（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
03-26 3250
<!-- 添加险种开始 --> <el-dialog destroy-on-close title="添加业务事项" :visible.sync="mattersShow" class="add-video-dialog mattersBox" width="45%"> <el-form :model="mattersForm" ref="mattersForm" label-width="8vw"> <el-form-item label=
微信小程序提交表单清空输入框
eva_feng的博客
03-26 6008
这里简单记录两种方法： 一、在input中绑定对象value，在提交成功后的回调中重新设置值为空。个人觉得这种方式适合表单数据比较少。 wxml代码 <form bindsubmit="submitForm"> <input name="title" maxlength="20" value="{{title}}" /> <input name="t...
【前端用法】form表单重置、清空方法记录
No8g攻城狮的博客
01-19 8237
首先：contact-form 是form的id属性值 方法一：调用reset（）方法 document.getElementById("contact-form")[0].reset(); 注意：网上说用document.getElementById("myform").reset();可以重置的，实际上并不能清空表单内容，因为用document.getElementById()或者do...
element UI表单中如何设置输入框
06-01
Element UI是一套基于Vue.js的组件库，提供了丰富的表单组件，包括输入框、下拉框、日期选择器等等。下面是使用Element UI设置输入框的步骤： 1. 安装Element UI：在命令行中使用npm或yarn安装Element UI。 ``` npm install element-ui --save ``` 2. 在Vue项目中引入Element UI：在main.js中引入Element UI并注册组件。 ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 在模板中使用el-input组件：在表单中使用el-input组件来创建输入框。 ``` <template> <div> <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="用户名"> <el-input v-model="form.username"></el-input> </el-form-item> </el-form> </div> </template> ``` 4. 在data属性中声明一个名为form的属性，它将作为整个表单的数据模型。 ``` <script> export default { data() { return { form: { username: '' } } } } </script> ``` 5. 当用户在输入框中输入内容时，v-model指令将自动将输入框的值与form对象中的username属性进行双向绑定，即输入框的值发生变化时，username属性也会跟着变化。 6. 最后，我们可以在模板中使用{{ form.username }}来显示输入框中的值。 注意：Element UI提供了丰富的配置项，可以根据需求自定义输入框的样式和行为。例如，可以使用placeholder属性设置输入框的占位符，使用size属性设置输入框的大小，使用clearable属性设置输入框是否可清空等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值