精华内容
下载资源
问答
  • 表单+表格 提交按钮向后台提交数据

    千次阅读 2019-11-18 16:42:41
    1,首先我的表格数据都是读取后台接口出来的数据,表单数据是前端在页面输入才有,但是表格数据默认的都是0,但是通过评委在页面打分,点击提交按钮,把数据提交到后台 ,后台进行处理。 2,需要把姓名的表单数据,...
    1,首先我的表格数据都是读取后台接口出来的数据,表单数据是前端在页面输入才有,但是表格数据默认的都是0,但是通过评委在页面打分,点击提交按钮,把数据提交到后台 ,后台进行处理。

    在这里插入图片描述

    2,需要把姓名的表单数据,还有各个项目的指标的得分(在这里实际上是tableData的数据),总分,这些数据给提交到后台
    3,HTML代码
    <template>
      <div>
        <el-container>
          <h1>高能产品本部第十二届创新奖-设计创新奖大赛评比-上午场</h1>
          <el-header>
            <el-form ref="form" :model="form"
              label-width="80px"
              style="width: 80%;margin:0 auto"
            >
              <el-row style="margin-top:10px">
                <el-col :span="17">
                  <el-form-item label=""> </el-form-item>
                </el-col>
                <el-col :span="3">
                  <el-form-item label="姓名:" style="margin-left:10px">
                    <el-input
                      v-model="form.userName"
                      placeholder="请输入姓名"
                      style="width:80%"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item label="日期:">
                    <el-date-picker
                      v-model="value1"
                      type="date"
                      placeholder="请选择日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-header>
          <el-main>
            <div>
              <el-table
                border
                :data="tableData"
                class="tb-edit"
                style="width: 80%;margin:0 auto"
                highlight-current-row
              >
                <el-table-column label="项目名称" prop="ProjectName">
                </el-table-column>
    
                <el-table-column
                  :label="item.Indicate"
                  v-for="(item, index) in HeadList"
                  :key="index"
                >
                  <template scope="scope">
                    <el-input
                      size="small"
                      v-model="scope.row[item.IndicateCode]"
                      placeholder="0"
                      type="number"
                      @change="
                        handleEdit(scope.$index, scope.row, item.IndicateCode)
                      "
                    ></el-input>
                    <span>{{ scope.row[item.IndicateCode] }}</span>
                  </template>
                </el-table-column>
    
                <el-table-column label="总分" prop="total"> </el-table-column>
              </el-table>
            </div>
          </el-main>
          <el-footer style="padding:0">
            <el-button type="primary" @click="Submit()">提交</el-button></el-footer
          >
        </el-container>
      </div>
    </template>
    
    4,JS代码
    <script>
    export default {
      data() {
        return {
          pickerOptions1: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            }
          },
          value1: "",
          form: {
            userName: ""
          },
          //  表头数据
          HeadList: [],
          // // 表格数据
          tableData: []
        };
      },
      created() {
        this.getTableData();
        this.getHeadList();
      },
      methods: {
        // 合计事件
        handleEdit(index, row) {
          var sum = 0;
          this.HeadList.forEach(element => {
            sum += Number(this.tableData[index][element.IndicateCode]);
          });
          row.total = sum;
        },
    
        // 请求表头数据
        getHeadList() {
          //通过$axios发送http get请求
          this.$axios.get("/api/Indicator/get/projectType?=Morning").then(res => {
            this.HeadList = res.data;
          });
        },
    
        // 请求表格数据
        getTableData() {
          //通过$axios发送http get请求
          this.$axios.get("/api/project/get/projectType?=Morning").then(res => {
            res.data.map(val => {
              val.total = 0;
            });
            this.tableData = res.data;
          });
        },
    
        // 提交数据事件
        Submit() {
          let jsonData = {
            userName: this.form.userName,
            userData: this.tableData
          };
          this.$axios.post("/api/Score/Put/jsonData", jsonData).then(res => {
            console.log(res);
          });
        }
      }
    };
    </script>
    
    4,提交后的效果

    在这里插入图片描述

    展开全文
  • // 将保存按钮改变成提交按钮 layero.find('.layui-layer-btn0').attr({ 'lay-filter' : 'addRole', 'lay-submit' : '' }); // 表单验证 form.verify({ roleName : function(value, item...
    layer.open({
    		type : 1,
    		title : '添加角色',
    		area : [ '500px', '350px' ],
    		shadeClose : true, // 点击遮罩关闭
    		content : html,
    		btn : [ '保存', '取消' ],
    		success : function(layero, index) { // 成功弹出后回调
    			// 解决按enter键重复弹窗问题
    			$(':focus').blur();
    			// 添加form标识
    			layero.addClass('layui-form');
    			// 将保存按钮改变成提交按钮
    			layero.find('.layui-layer-btn0').attr({
    				'lay-filter' : 'addRole',
    				'lay-submit' : ''
    			});
    			// 表单验证
    			form.verify({
    				roleName : function(value, item) {
    					if (!new RegExp("^[a-zA-Z0-9_|\u4e00-\u9fa5\]{2,10}$")
    							.test(value)) {
    						return '角色名必须为2-10位且不能有特殊字符';
    					}
    				},
    				roleDesc : function(value, item) {
    					if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\]{2,200}$")
    							.test(value)) {
    						return '角色描述必须为2-200位且不能有特殊字符';
    					}
    				}
    			});
    			// 刷新渲染(否则开关按钮会不显示)
    			form.render('checkbox');
    		},
    		yes : function(index, layero) { // 确认按钮回调函数
    			// 监听提交按钮
    			form.on('submit(addRole)', function(data) {
    			});
    		},
    		btn2 : function(index, layero) { // 取消按钮回调函数
    			layer.close(index); // 关闭弹出层
    		}
    	});

    要想将保存按钮变为表单提交的按钮我们需要在success函数中加入

     然后我们就可以使用layui的监听事件监听到提交按钮了

     

    展开全文
  • 表单按钮一般分为三类,分别是提交按钮、重置按钮和普通按钮。提交按钮、重置按钮只能在表单中使用,普通按钮则可以在网页的任何地方使用。2. 从本质上讲,表单按钮也是表单控件,之所以把它分离出来,单独介绍,是...

    (本次随笔仅作为学习用途)

    表单按钮

    1. 表单按钮一般分为三类,分别是提交按钮、重置按钮和普通按钮。提交按钮、重置按钮只能在表单中使用,普通按钮则可以在网页的任何地方使用。

    2. 从本质上讲,表单按钮也是表单控件,之所以把它分离出来,单独介绍,是因为它的功能比较特别。提交按钮用于把表单数据发送到服务器,重置按钮用于重置整个表单的数据,普通按钮则需要开发者赋予它功能。

    3. 当用户点击提交按钮和重置按钮时,就有动作发生,一般不需要添加动作;而普通按钮,必须加上指定的动作,并通过相应的事件来触发,才会在事件发生时激发动作,否则点击普通按钮,什么也不发生。

    提交按钮

    1.  用户在表单中填写信息后,只有点击提交按钮,这些信息才会被发送到服务器。把 input 元素的 type 属性设置为“submit”,来创建提交按钮。

    2.  在创建提交按钮时,input 元素的 value 属性值,为按钮上显示的文本。如果没有提供 value 属性,则按钮上默认显示“提交”。

    3.  如果不提供 name 属性,则提交按钮的名/值对就不会发送给服务器。

    4. 由于通常不需要这些信息,因此,这种做法是有益的。但是,如果表单上有多个提交按钮,就需要为每个按钮提供 name 属性,以便能够知道哪个按钮被点击。

    5. 由于默认的按钮非常丑陋,并且不同浏览器下的外观又不尽相同。因此,可以创建一幅漂亮的图像,再把 input 元素的 type 属性设置为“image”,把 src 属性设置为图像的URL,就可以使用该图像作为提交按钮。使用图像按钮时,input 元素没有value属性。

    15f20e62f55d05cb057dc7ac3ab1260e.png

    689ca70ef4b6afa54a532a826b250c1a.png

    当用户将鼠标悬停在图像按钮上时,浏览器会将箭头替换为手形图标。

    切换注册图片:

    322cb37e9739673923220485633f6da6.png

    在功能上,图像按钮跟 type=submit 的按钮没任何区别,只是用图像取代 input 元素的 value 属性而已。当然,完全可以通过CSS 来美化提交按钮的外观,达到图像一样的效果。这样,在实现了相同效果的同时,又不必向服务器请求图像,可以减少服务器的负担。

    标签:图像,表单,HTML,提交,按钮,input,属性

    来源: https://www.cnblogs.com/sjslove/p/12862482.html

    展开全文
  • 大神求帮助,html页面有俩个form表单一个提交按钮,如何点击提交按钮能把这两个表单提交 大神求指教,谢谢啦
  • 表格 标记: <table></table>:表示一个表格 属性:table height align border 边框宽度,取值以px为单位 bgcolor cellspacing:单元格外边距(单元格与单元格 或者单元格与表格之间的距离) ...

    表格

    标记:
    <table></table>:表示一个表格
    属性:table
    height
    align
    border 边框宽度,取值以px为单位
    bgcolor
    cellspacing:单元格外边距(单元格与单元格 或者单元格与表格之间的距离)
    ccellpadding:单元格内边距(单元格与内容之间的距离)
    <tr></tr>:表示表格中的一行
     
    <tb></tb>:表示行中的一咧
    <th></th>:行/列 标题(加粗,水平居中)
    <caption></caption>:表格的标题
    该元素必须添加在<table>之下,所有tr之上



    表格的复杂使用

    行分组
    允许将若干行划分到 一个组中
    表头行分组
    允许将第一行的内容单独分到表头行分组中
    <thead></thead>
    表尾行分组
    允许将最后行的内容单独分到表尾行分组中
    <tfoot></tfoot>
    表主体行分组
    <tbody></tbody>>



    2、不规则表格创建
    1、通过td 跨行和跨列实现不规则的表格
    1、跨列
    <td colspan=""> 从指定单元格位置处开始,横向向右,合并掉几个单元格(包含自己),被合并的单元格要删除
    2、跨行
    <td crowspan=""> 从指定单元格位置处开始,纵向向下,合并掉几个单元格(包含自己),被合并的单元格
    3、 表格的嵌套
    被嵌套的所有的内容,只能放在td中

     

    列表

    1、作用:按照一定格式显示数据
    组成:列表联系以及列表项



    value:最终提交给服务器的中
    name:控件的名称,提供给服务器使用
    disaled:禁用控件,该属性没有值,只能看,不能改,并且不能交给服务器

     

    单选按钮和复选框:

    标记:单选按钮:<input type="radio"/>
    复选框:<inout type="checkbox"/>
    文本框:<input type="text"/>
    密码框:<input type="password"/>
    提交按钮:<input type="submit"/>
    重置按钮:<input type="reset"/>
    普通按钮:<input type="buton"/>
    文件筐:<input type="file"/>
    隐藏域:<input type="hidden"/>
    文本域:<textarea>文本</textarea>

     

    标签:表单中的文本,用于控件设置显示名称
    语法:<ladel for="控件id">文本</ladel>

     

    转载于:https://www.cnblogs.com/xf2764/p/10326252.html

    展开全文
  • {{data.uid}} {{data.deviceID}} {{data.name}} {{data.province}} 这个是用AngularJS写的表格的一部分,最后一列就是复选框,表格的下面有一个提交按钮,现在想要
  • 如何在用按钮提交表格数据后弹出一个框表示提交成功! 例: <form action="studentAction!selectCourse" method="POST"> studentID:<input type="text" name="studentId" /> courseID:<input ...
  • 可用如下语法: {{# if(d.IsAudit==false){ }} <a class='layui-btn layui-btn-xs layui-btn-normal' lay-event='edit'>编辑</a> <a class='layui-btn layui-btn-xs la...
  • 问题描述:在可编辑表格中,我选择一行已输入的数据,点击删除按钮,该行数据将被删除,然后当我点击表单提交按钮时,已经被删除的那一行数据仍然被插入数据库中。   1:我的可编辑表格:   2:选中一行后,点击...
  • 提交按钮在表单内部、外部的使用

    千次阅读 2019-01-17 09:37:13
    表单标签内部按钮 在&lt;form&gt;标签内部放&lt;button&gt;标签,不论是否添加type="submit"属性,点击按钮都会执行表单的submit方法,如果放多个按钮,每个按钮的点击事件都会触发...
  • 给表单添加一个提交按钮

    千次阅读 2018-05-02 17:26:07
    Add a Submit Button to a Form让我们来为你的form添加一个submit(提交)按钮,点击这个按钮,表单中的数据将会被发送到你通过action属性指定的地址上。下面是submit按钮的例子:&lt;button type="submit&...
  • 处理一个表单有多个提交按钮

    千次阅读 2017-09-05 20:16:34
    在做到表单的提交的时候,如果是一个按钮提交的话,对应一个...思路是这样的:先不指定表单的action,让action属性为"",method="post",为你的提交按钮全部替换为普通按钮,给它们都加上onclick事件,注意这里每一个
  • asp.net制作的网页,如何将textbox里面输入的数按button提交按钮后导入到本地的excel表格或别的表格
  • 由于项目使用了elementui,所以在使用表单时复制了用例,如下图,提交按钮放在了el-form-item中。 但是由于想自己设置button的样式所以把el-button改成了button,并且没有设置type. 问题:在点击按钮时页面会自动刷新...
  • form表单提交点击按钮提交form表单

    千次阅读 2017-06-14 00:03:04
    需求是:新增页面,有一个表单要提交,正常直接在action中写url,点击submit按钮就可以提交了,但我希望能够在表单提交之前验证一下文本框内容。于是,使用jquery来验证表单,验证通过后提交form表单。
  • 在点击确定按钮前要结束最后一个单元格编辑状态,如上图,否则getRowData方法获取的表格数据包含文本编辑框的html代码,如下图 且必须用saveCell函数结束文本编辑状态,(不能用restoreCell函数,因为此函数只能获取...
  • 有两种不同的按钮–提交按钮和复位按钮。 提交按钮是用来当你想提交表单和标记看起来像这样: 复位按钮是用来由用户和标记看起来像这样明确的Al输入: 这是一个提交按钮和复位按钮的简单形式 ...
  • jQuery 实现批量提交表格多行数据

    万次阅读 2017-09-22 14:25:32
    批量提交用jquery操作起来还是很方便的,主要的思路就是 在动态生成表格时每一行都存下这条数据的唯一id,然后监听选择,把选中的数据放入数组,最后提交到后台就OK了。 先上一部分代码(这是表头以及一个全选按钮)...
  • 创建表单、设置表单属性、 单行文本、密码框 、单选按钮、复选按钮、普通按钮、重置按钮 、提交按钮、图像域 、文件域 、隐藏域 、下拉列表项 、字段集、标签。 创建表单 表单创建在<body></body>标签中...
  • 是这样,我做一个网页版的冒泡排序,对10个数字进行冒泡排序,每个数字占一个空格(表格),...然后设定一个提交按钮,点击这个按钮后可以对这十个空格的数字进行冒泡排序。 请不吝指教,谢谢。 要完整的代码,谢谢。
  • 增加点赞手势图及提交按钮图标

    千次阅读 2017-10-22 03:17:55
    Font Awesome 是一个非常方便的图标...同样,在这个提交按钮中增加 Font Awesome 的 fa-paper-plane 图标。  <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit
  • 案例: 代码: &lt;el-table :data="tableDataLeft" border v-loading='loadingData' @selection-change="handleSelectChangeLeft"... element-loading-text='加载中...' ref="...
  • Laravel-Admin 自定义操作按钮大全(表格工具区域、行内操作按钮) 一、行内操作按钮 1、单行操作 行内操作按钮-单行操作共需要三步: 生成操作类 编辑操作类 加入到表格 生成操作类 ...use Illuminate\Data
  • 上述按钮id是filled,如果你需要用form.on查询 那你在页面点击查询按钮就会无反应,那你需要一些代码才能点击查询成功...lay-submit 是提交时必加的,lay-filter="filled" 中最好加自己按钮的id,这样子就可以了 ...
  • !... ...这个dialog是avue自带的列表行数据编辑窗口,点一下提交按钮所有输入框都变成disabled的了,不管是否成功请求后台都一样! 有没有大神指点一二,我在avue官方文档没找到相关属性,谢谢!!!
  • JS中添加如下代码 别忘记表格绑定事件 index.html 中需要的添加如下代码 控制器中添加对应方法 $params 打印的就是你html中的数据
  • 这几天基于react写了一个小demo测试,主要实现的功能是:在输入框中输入文字,点击添加按钮,在下方的表格中会自动添加一行数据,点击删除按钮后,该行数据被删除。  先来看看最后的效果图:  操作前  操作...
  • 需求是点击“编辑”按钮表格进入可编辑状态(这也是个头疼的问题),然后修改数据,保存提交。 首先,我在考虑怎么让表格进入可编辑状态,这个问题上,查了很多资料,如果前端用bootstrap,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 55,076
精华内容 22,030
关键字:

表格提交按钮