精华内容
下载资源
问答
  • form表单重置

    千次阅读 2018-10-25 10:45:45
    有时候我们需要重置一些表单元素,点击重置按钮的时候,清空表单元素,设置下拉框为默认值等,重置表单除非特殊情况,尽量使用表单自己的重置方法 html部分 <div class="main_content"> ...

    有时候我们需要重置一些表单元素,点击重置按钮的时候,清空表单元素,设置下拉框为默认值等,重置表单除非特殊情况,尽量使用表单自己的重置方法


    html部分


    <div class="main_content">
                    <form id="user_info">
                        <table>
                            <tr>
                                <td class="topic">用户类型:</td>
                                <td class="user_type">
                                    <select class="sel-types"> 
                                        <option value="">请选择用户类型</option>
                                        <option value="0">个人版</option>
                                        <option value="1">机构版</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="topic">用户姓名(机构名称):</td>
                                <td class="user_name">
                                    <input type="text"/>
                                </td>
                            </tr>
                            <tr>
                                <td class="topic">证件号码:</td>
                                <td class="ID_number">
                                    <input type="text" name="idcard" id="idcard">
                                </td>
                            </tr>
                        </table>
                        <ul id="input-history" class="dsn">
                            <li>
                                <span class="left">用户名</span>
                                <span class="right">身份证号</span>
                            </li>
                        </ul>
                    </form>
                    <!-- 下一步按钮 -->
                    <div class="fundNextButton">
                        <button id="ensure">确定</button>
                        <button id="user-reset">重置</button>
                    </div>
                </div>

    js部分


    $('#user-reset').click(function(){
              // $(".ID_number input[type='text']").val('');
              // $(".sel-types option[value='']").attr("selected", true);
              $('#user_info')[0].reset()
              $(".user_name input[type='text']").val('').focus();
            });

     

    展开全文
  • layUI Form表单重置问题

    万次阅读 2019-04-11 17:23:57
    layUI Form表单重置问题 layUI表单有两种方法,第一种是直接使用FORM标签,另一种是利用div作为容器,将其class设置成layui-form,这两种方法都可以使用layUI Form,但是在重置时会出现不同。 但是当在: 使用LayUI...

    layUI Form表单重置问题

    layUI表单有两种方法,第一种是直接使用FORM标签,另一种是利用div作为容器,将其class设置成layui-form,这两种方法都可以使用layUI Form,但是在重置时会出现不同。

    但是当在:
    使用LayUI的后台模板时,其原始使用的是div作为form的容器,因此无法使用reset,
    将其改为FORM之后虽然能够使用reset,但是在reset之后会自动刷新整个页面,特别对于页面查询出来的数据表格,reset之后会重新请求数据,因此数据表格的内容也会随之改变。

    直接使用form标签的表单支持reset方法,而使用其他标签作为容器的则不支持。
    对于直接使用Form的表单,想要reset,直接使用LayUI提供的方法就行,具体代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>reset说明</title>
    <link rel="stylesheet" href="layui.css" media="all">
    </head>
    <body>
    <form class="layui-form" lay-filter="test"> <!-- 提示:如果你不想用form,你可以换成div等任何一个普通元素 -->
      <div class="layui-form-item">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
          <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">下拉选择框</label>
        <div class="layui-input-block">
          <select name="interest" lay-filter="aihao">
            <option value="0">写作</option>
            <option value="1">阅读</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="submit-form">立即提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
    <script src="layui.js"></script>
    <script>
    layui.use('form', function(){
      var form = layui.form;
      //监听搜索
      form.on('submit(submit-form)', function(data){
           var field = data.field;
           //执行操作
            return false;
            });
    });
    </script>
    </body>
    </html>
    
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    

    这一句便是调用LayUI的reset方法。一般的LayUI Form使用就可以。

    为了实现点击reset按钮只重置表单内容而不刷新整个界面,则需要在

      form.on('submit(submit-form)', function(data){
           var field = data.field;
           //执行操作
            return false;
            });
    

    时返回false,表示不刷新整个页面,即在点击reset之后不刷新页面,而是只刷新Form表单。

    展开全文
  • elementUI form表单重置问题 问题 如果修改了data里的表单form默认值,那么重置以后就是你修改以后的值,而不是data里的值了所以this.$refs.ruleForm.resetFields()重置的是data修改的值。 解决方法 在重置的方法中...

    elementUI form表单重置问题

    问题

    • 如果修改了data里的表单form默认值,那么重置以后就是你修改以后的值,而不是data里的值了所以this.$refs.ruleForm.resetFields()重置的是data修改的值。
      解决方法
    • 在重置的方法中添加 Object.assign(this.$data, this.$options.data())将初始状态的data复制到当前状态的data。
        cancelForm() {
          this.$emit("closepop");
          Object.assign(this.$data, this.$options.data())
           this.$refs.ruleForm.resetFields();
      
           
        },
    
    展开全文
  • form表单重置 myform 是form的id属性值 1.调用reset()方法 function fomrReset() { document.getElementById("myform").reset(); }

    1.form表单重置

    myform 是form的id属性值
    1.调用reset()方法

     function fomrReset()
     {
         document.getElementById("myform").reset();
    }
    

    2.jquery中form表单序列化

    serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。

    可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。

    序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    </head>
    
    <body>
        <form action="" id="form1">
            <input type="text" id="t1" name="name">
            <input type="text" id="t2" name="pwd">
            <button> 提交</button>
        </form>
        <script>
            $('button').click((e) => {
                e.preventDefault();
                console.log($('#form1').serialize());
            })
        </script>
    </body>
    
    </html>
    

    在这里插入图片描述

    展开全文
  • 【HTML】form表单重置、清空方法记录

    千次阅读 2020-10-26 15:09:00
    form表单重置、清空方法记录 myform 是 form 的 id 属性值 调用 reset()方法 function fomrReset() { document.getElementById("myform").reset(); } 逐个清空input、select值 function resetAll() { $("#...
  • Jquery form 表单重置

    2017-04-25 02:51:18
    Jquery没有直接重置表单的方法,但是可以通过调用 DOM 中的reset方法来重置表单 代码: $('#form1')[0].reset()
  • 使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果。 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性。 <el-form :inline="true" :model="queryParams" ref="queryForm"> 第...
  • element 组件库里面重置有两个方法resetField和clearValidate,但是这两个方法,要用这两个方法肯定是要用ref实例化一个表单,用实例化的对象去重置表单,但是经常性的无效 实例化是 <el-form ref="operateForm" ...
  • form表单 重置按钮

    2017-10-29 10:37:59
    项目大神编写,,,,function resetForm(form) { if (form) { //éåæå®form表åææå…ç´  for (var i = 0; i < form.length; i++) { var element = form[i];
  • js form 表单 重置 清空

    2020-06-04 15:25:18
    清空 和 重置的差异是 清空:彻底清空input内容即便初始值value有值, 重置:将input内容重置为value初始状态 //重置 //document.getElementById("myForm").reset(); //重置 //$('#myForm')[0].reset(); //清空 ...
  • form表单重置、清空方法记录

    万次阅读 2018-06-20 15:30:20
    myform 是form的id属性值1.调用reset()方法1 function fomrReset() 2 { 3 document.getElementById("myform").reset(); 4 } 2. 逐个清空input、select值1 function resetAll() { 2 $("#myform&...
  • 对于form表单重置和清空校验经常会使用到,这里我对自己用到几种方法做一个总结: Element UI自带的清空form表单方法 if(this.$refs.formData){//第一次打开dialog弹窗会报错,所以需要判断一下 this.$refs....
  • 首先:contact-formform的id属性值 方法一:调用reset()方法 document.getElementById("contact-form")[0].reset();...可以重置的,实际上并不能清空表单内容,因为用document.getElementById()或者do...
  • 记录一下遇到的问题 表单重置 拿到表单 ref // 监听添加用户对话框的 关闭 事件 addUserDialogClosed() { this.$refs.editFormRef.resetFields() },
  • jquery form表单重置

    2015-05-27 10:26:38
    $("formID")[0].reset()
  • Vue+El-form表单重置

    千次阅读 2020-05-29 15:44:58
    1.表单添加ref属性 <el-form ref="refname"></el-form> 2.form的每个item添加prop属性 <el-form-item prop="name"> <el-input v-model="query.name"></el-input> </el-form-item...
  • HTML form表单重置按钮无效问题

    千次阅读 2018-07-22 16:35:16
    在编写网页的时候,突然发现有一个页面的查询表单重置按钮不起作用了。 1.说明: 输入表单内容,不点击查询按钮,直接重置按钮,是可以清空重置表单内容的; 输入表单内容,点击查询按钮,再点击重置按钮,发现...
  • myform 是form的id属性值 1.调用reset()方法 function fomrReset() { document.getElementById("myform").reset(); } 2. 逐个清空input、select值 function resetAll() { $("#myform").find('input[type=...
  • vue element-ui form表单重置 快捷方法

    万次阅读 热门讨论 2018-08-24 11:16:00
    重置快速清空的方法 &lt;el-form status-icon :rules="rules" :model="ruleForm" ref="ruleForm" :label-position="labelPosition" label-width="100px"...
  • ant-design vue中form表单重置问题

    千次阅读 2021-04-12 10:07:23
    场景:一个组件两个弹窗,即新增、编辑两个弹窗,两个表单 需求:点击新增按钮,出现新增弹窗,填写表单,提交成功,弹窗消失。再次点击新增按钮,弹窗出现,弹窗里的值清空(重置) 问题:再次点击新增按钮,出现上...
  • react项目 form表单重置 initialValue

    千次阅读 2018-11-23 17:39:49
    const FormItem = Form.Item; const thirdLayout = { xs: 24, sm: 24, md: 8, lg: 8, xl: 8, xxl: 8, }; const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 24 }, md: { span: 8 }, ...
  • 需要完整 el-form及 el-form-item 组件中 且 配置 prop,不配置的执行此方法,该输入框值不会重置 <el-form label-width="80px" :model="addInfo" ref="addRef"> <el-form-item label="名称" prop="role...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 48,672
精华内容 19,468
关键字:

form表单重置