from表单的重置按钮(reset)不能重置隐藏input框的值

最新推荐文章于 2022-08-08 09:29:02 发布
最新推荐文章于 2022-08-08 09:29:02 发布
阅读量2k 收藏 1
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hangchen1025/article/details/107025038
版权

代码

<form >
	<input type="hidden"/>
	<input type="reset" value="重置"/
</form>

当input框有值,比如通过js赋值,点击重置,值依然存在,所以可以将代码改成这样

<form >
	<input type="text" style="display:none;"/>
	<input type="reset" value="重置"/
</form>

即,给input加样式隐藏

hangchen1025
关注
  • 7
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于form表单的reset功能无法还原hidden中的值
weixin_34026276的博客
07-10 450
reset的功能是将输入项的值赋值为form中的值，也就是说如果form中有值的话，那么即使点击reset按钮也不会将输入项清空，而是会将其赋值为form中的值。根据上面的说明，我理解后如下：只有能键盘输入，鼠标点击修改值的控件【即除hidden意外的输入控件】才能使reset还原为初始化的值，哪怕隐藏了的输入控件。 转载于:https://blog.51cto....
Form表单的重置按钮(type=“reset“)无法重置隐藏Input输入框的值
可达鸭给我冲鸭
09-15 1883
Form表单的重置按钮(type=“reset”)无法重置隐藏Input输入框的值 前端使用的Layui、在搜索表单处因为需要设置两个隐藏输入框来存储时间范围，但是发现使用重置按钮无法重置两个隐藏输入框的值，再此整理下解决办法。 问题代码 <div class="layui-inline"> <label class="layui-form-label">开学时间</label> <div class="layui-input-inline">
类型为hidden的input,其里面的值无法reset
aaawyh的专栏
06-26 943
请选择     男     女 function a(s){ $("#like_sex").val(s); }
表单reset无法重置hidden的解决方案
逆风的蔷薇
09-17 1051
方法一：用text代替hidden，设置text隐藏 <input id="id" name="id" style="display: none;" value="0" /> 方法二：单独处理hidden类型 jQuery("#saveForm").form("reset"); jQuery("input[type='hidden']").val("");
jquery.form.js的重置表单增加hidden重置代码
weixin_30291791的博客
09-12 209
jquery.form.js的resetForm()方法无法重置hidden元素，打开文件在1460行加上以下代码即可 转载于:https://www.cnblogs.com/taiyonghai/p/7511056.html
jquery实现from表单重置
qq_44537625的博客
07-31 579
jquery中没有rest（）方法，只有调用dom中的rest方法才能进行重置 $('#yigeform').reset()//这样是不行的 $('#yigeform')[0].reset()//正确的方法
如何使用图片按钮作为重置(reset)表单按钮
09-28
本篇文章将详细介绍如何使用图片按钮作为重置(reset)表单的功能。 首先，我们需要了解HTML中的`<input>`元素，它允许我们创建各种类型的用户输入控件，包括按钮。当`type`属性设置为`image`时，`<input>`元素会显示...
jQuery实现form表单reset按钮重置清空表单功能
12-12
有时候可能需要实现这样的效果：使用ajax提交表单，成功提交表单之后清空表单，如下代码： 代码如下: <form> <input name=”name1″ /> <input name=”name1″ /> <textarea name=”...
使用jQuery重置(reset)表单的方法
11-30
`，我们会发现这并不工作，因为jQuery本身并没有提供一个直接的`.reset()`方法来重置表单。这是由于`.reset()`实际上是HTML DOM元素的一个原生方法，而不是jQuery对象的方法。 那么，如何在jQuery中正确地重置表单...
VUE-From表单校验重置
yang516114852的博客
02-14 2309
1.描述： 表单校验后 点击取消或者关闭，再次打开，校验提示语不消失。 需要在点击打开表单弹窗或者关闭弹窗是对表单进行重置 2.方法： this.$refs.taskform.resetFields() 我是在关闭的时候调用的，（由于自己的是子组件，点击新增时进行表单重置会有参数找不到的问题） 由于应用场景不同，如果你自己的Form弹窗中关闭弹窗和取消按钮不是一个方法要再两个方法中都加入重置表单方法。 ...
view Ui 里的from表单重置问题 this.$refs.form.resetFields
weixin_56115652的博客
08-08 1163
view ui 组件中,from表单提交 resetField方法
Form Reset Function
清箫的专栏
06-05 5848
Reset按钮，这个在现在的项目中几乎已经不用了，因为用户很容易点击到reset按钮，从而使自己陷入懊恼，不得不重新填表单。不过form.reset()在通过Ajax提交请求的页面中，还是有人使用。比如成功提交之后，ajax表单应该被重置，这样下次重新显示表单时，表单是空的或还原为原始值。 很可惜，form.reset()浏览器不兼容，不同的浏览器在实现reset时，使用了不同的策略。FF在
表单重置时，type="hidden"的input元素不能被重置
mask-fish
01-19 964
<input type="hidden" name="userId" id="userId"> 如上：当表单重置时，隐藏域（type="hidden"）不可被重置； 可以换一种方法对其进行隐藏，如下： <input type="text" name="userId" id="userId" style="display:none;"> 设置其样式为：displa...
【Bug】表单中的重置按钮对隐藏域无效
不务正业的野猴子
04-14 1141
表单中的重置按钮对隐藏域无效 测试反馈列表查询处的重置按钮有bug，第一反应是重置按钮写的时候已经测试过了，怎么会有问题呢？但测试提了，咱也的检查一遍，结果还真有问题。。。 代码如下： &amp;lt;form name=&quot;listForm&quot;&amp;gt; &amp;lt;div class=&quot;text-l cl&quot;&amp;gt; &amp;lt;
form表单重置时，让某一个input值不变
sunshine_xtt的博客
09-30 2212
想让表单重置时某一个input值保持不变，只要给reset按钮添加一个点击事件，在执行 reset() 方法之前修改它的 defaultValue 属性，将它当前的值设为初始值就可以了。 <input type="text" id="mcName" name="mcName" class="layui-input mcName" lay-verify="" readonly> ...
form表单重置、清空方法记录
weixin_30508241的博客
10-26 7100
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.reset() 的真正作用，并不是清空所有输入栏
学习笔记
03-11 8164
form.reset() 的真正作用，并不是清空所有输入栏 form 有个方法是 reset()，作用不是清空 &lt;form&gt; 标签中的所有输入栏，而是回到上一次载入页面时的状态。 看例子： &lt;form id="input-form"&gt; &lt;input type="text"&gt; &lt;input type="text"&gt;
vue3 element-ui from表单重置
最新发布
05-17
在 Vue 3 中，可以使用 `ref` 来获取表单元素，并通过 `reset` 方法来重置表单。同时，Element UI 表单也提供了 `resetFields` 方法来重置表单。 以下是一个示例： ```vue <template> <el-form ref="myForm"> <!-- 表单项 --> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submit">提交</el-button> <el-button @click="reset">重置</el-button> </el-form-item> </el-form> </template> <script> import { ref } from 'vue'; export default { setup() { const form = ref({ username: '', password: '', }); const myForm = ref(null); // 提交表单 const submit = () => { myForm.value.validate((valid) => { if (valid) { // 表单验证通过后的操作 } else { // 表单验证失败的操作 } }); }; // 重置表单 const reset = () => { form.value = { username: '', password: '', }; myForm.value.resetFields(); }; return { form, myForm, submit, reset, }; }, }; </script> ``` 在上面的示例中，我们使用了 `ref` 来获取了表单元素，并定义了 `form` 和 `myForm` 两个变量。`submit` 方法用于提交表单，而 `reset` 方法则重置了表单数据和验证状态。在 `reset` 方法中，我们通过 `myForm.value.resetFields()` 来调用 Element UI 表单的重置方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值