动态增加表单元素并获取元素的text和value提交

以上是效果图

需求是这样的:

专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户。

这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识别的条件分别拼接并保存到数据库。专家可以点击 + 添加条件,多个条件之间是并且的关系。

问题的关键在于动态添加表单和如何获取表单的text和value分别根据要求进行拼接。

首先是添加表单,这个很简单:

        $("#addform").click(function () {
            //添加的内容
               var addform = '            <div id="formpart" class="itemdiv layui-form-item">\n' +
                '                <div class="layui-input-inline inheight" style="width: 10px;">\n' +
                '                    <label>并且:</label><br/>\n' +
                '                </div>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <select lay-verify="required" name="factory" id="factory" lay-filter="" lay-search="lay-search">\n' +
                '                        <option value="" selected="selected">请选择影响因素</option>\n' +
                '                        <option value="leaf_temperature">叶面温度</option>\n' +
                '                    </select>\n' +
                '                </div>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <select name="operator" id="operator" lay-verify="required" lay-filter="" lay-search="lay-search">\n' +
                '                        <option value="" selected="selected">请选择运算符号</option>\n' +
                '                        <option value=">">大于</option>\n' +
                '                        <option value="=">等于</option>\n' +
                '                    </select>\n' +
                '                </div>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <input class="layui-input f_val" lay-verify="required" name="f_val" placeholder="请输入因素数值" autocomplete="off"/>\n' +
                '                </div>\n' +
                '            </div>';
            $("#formpart").after($(addform));
            //删除表单
            $("#removeform").click(function () {
                $("#addformbody").remove();
            });
            form.render();
        });

然后是在提交的时候获取表单的所有的text和value进行拼接,由于这里使用的layui,他的select和显示并不在一起,具体见layui-select,这就给工作造成了很大的困难,这里就要用的next,eq(),children(),等等选择器。

思路就是每个追加的条件都是三个表单元素构成的,他们都在一个div中,根据这些div的相同的class获取到这些数据然后遍历每个div,在其中用各种选择器获取他们的text和value,进行拼接,发送给后台。

全部代码如下:

<!DOCTYPE HTML>
<html>
<head>
    <title>智慧农业</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript"  src="js/jquery-1.12.4.min.js"></script>
    <script src="layui/layui.js" charset="utf-8"></script>
    <link rel="stylesheet" href="layui/css/layui.css"  media="all" />

</head>
<body>
<div style="margin: 15px;">
    <fieldset class="layui-elem-field layui-field-title"
              style="margin-top: 20px;">
        <legend>添加</legend>
    </fieldset>
    <form id="addf" class="form-inline layui-form">
        <div style="padding: 5px;border: 1px #b2b2b2 solid;width: 780px">
            <div id="formpart" class="itemdiv layui-form-item">
                <div class="layui-input-inline inheight" style="width: 10px;">
                    <label>条件:</label><br/>
                </div>
                <div class="layui-input-inline">
                    <select lay-verify="required" name="factory" id="factory" lay-filter="" lay-search="lay-search">
                        <option value="" selected="selected">请选择影响因素</option>
                        <option value="leaf_temperature">叶面温度</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <select name="operator" id="operator" lay-verify="required" lay-filter="" lay-search="lay-search">
                        <option value="" selected="selected">请选择运算符号</option>
                        <option value=">">大于</option>
                        <option value="=">等于</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <input class="layui-input f_val" lay-verify="required" name="f_val" placeholder="请输入因素数值" autocomplete="off"/>
                </div>
                <div class="layui-btn" style="transform: translateY(0px);" id="addform">+</div>

                <button class="layui-btn" lay-submit="" style="transform: translateY(0px);"
                        id="but_sub" lay-filter="formsub" >确认
                </button>
            </div>
        </div>

    </form>
</div>
<table id="tabledata" lay-filter="the_table" ></table>
</body>
<script>
    layui.use(['table','layer','form'], function(){
        var table = layui.table;
        var layer = layui.layer ;
        var laytpl = layui.laytpl;
        var form = layui.form;
        var $ = layui.$ ;


        table.render({
            elem: '#tabledata', //指定原始表格元素选择器(推荐id选择器)
            url:"http://localhost:8081/itemlist?id=1",
            page:true,
            limits: [10,20,30],
            limit: 10,
            skin:'row',
            even:true,
            id:'the_table',
            cols: [[
                {field: 'id', title: 'id', width: '20%', align:'center',sort: true, },
                {field: 'sop_id', title: 'SOP编号', width: '20%', align:'center',sort: true},
                {field: 'condition_expert', title: '条件', width: '20%', align:'center',sort: true},
                {field: 'condition_onenet', title: '动作', width: '19%', align:'center',sort: true},
                {fixed: 'right',title:'工具栏', width:'19%', align:'center', toolbar: '#toolbtn'}
            ]]
        });

        table.on('tool(the_table)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'del'){
                layer.confirm('确认删除么', function (index) {
                    $.ajax({
                        type: "post",
                        url: 'http://localhost:8081/itemdel?id=' + data.id,
                        data: {
                            id: data.id
                        },
                        dataType: "json",
                        sync: "false",
                        success: function (data) {
                            layer.msg(data.message);
                        },
                        error: function () {
                        }
                    })
                    table.reload("the_table");
                });
            }
        });


        $("#add_btn").click(function(){
            layer.open({
                type: 2,
                title:['添加','font-size:22px'],
                area: ['400px', '420px'],
                content: '/additem',
                cancel: function(index, layer){
                    table.reload("the_table");
                }
            });
        });
        
                   form.on('submit(formsub)', function(data){
              var $elements = $('.itemdiv');
            var len = $elements.length;
            var condition_expert='';
            var condition_onenet='';
            for(var i=0;i<len;i++){
                var f=$(".itemdiv").eq(i).children().eq(1).children().eq(1).children().eq(0).children().eq(0).val();
                var o=$(".itemdiv").eq(i).children().eq(2).children().eq(1).children().eq(0).children().eq(0).val();
                var v=$(".f_val").eq(i).val();
                
                var fv = $("select[name='factory']").eq(i).val();
                var ov = $("select[name='operator']").eq(i).val();
                if(i==0){
                    condition_expert=f+o+v;
                    condition_onenet='{'+fv+'}'+ov+v;
                }else{
                    condition_expert=condition_expert+'并且'+f+o+v;
                    condition_onenet=condition_onenet+'&'+'{'+fv+'}'+ov+v;
                }     
            }
            if(len>1){
                condition_onenet='('+condition_onenet+')';
            }
            console.log(condition_expert);
            console.log(condition_onenet);
            

            
            $.ajax({
                url: 'http://localhost:8081/additem',
                type : 'POST',
                data : {
                    sop_id:1,
                    condition_expert:condition_expert,
                    condition_onenet:condition_onenet,
                },
                success : function(returndata) {
                    layui.layer.msg(returndata.message,{time: 666});
                    $('#addf')[0].reset();
                    table.reload("the_table");
                },
                error : function(returndata) {
                    layer.msg(returndata,{time: 666});
                }
            });
            return false;
              return false; 
            });

        $("#addform").click(function () {
            //添加的内容
               var addform = '            <div id="formpart" class="itemdiv layui-form-item">\n' +
                '                <div class="layui-input-inline inheight" style="width: 10px;">\n' +
                '                    <label>并且:</label><br/>\n' +
                '                </div>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <select lay-verify="required" name="factory" id="factory" lay-filter="" lay-search="lay-search">\n' +
                '                        <option value="" selected="selected">请选择影响因素</option>\n' +
                '                        <option value="leaf_temperature">叶面温度</option>\n' +
                '                    </select>\n' +
                '                </div>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <select name="operator" id="operator" lay-verify="required" lay-filter="" lay-search="lay-search">\n' +
                '                        <option value="" selected="selected">请选择运算符号</option>\n' +
                '                        <option value=">">大于</option>\n' +
                '                        <option value="=">等于</option>\n' +
                '                    </select>\n' +
                '                </div>\n' +
                '                <div class="layui-input-inline">\n' +
                '                    <input class="layui-input f_val" lay-verify="required" name="f_val" placeholder="请输入因素数值" autocomplete="off"/>\n' +
                '                </div>\n' +
                '            </div>';
            $("#formpart").after($(addform));
            //删除表单
            $("#removeform").click(function () {
                $("#addformbody").remove();
            });
            form.render();
        });
        
        var $ = layui.$, active = {
            reload : function() {
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('the_table', {
                    page : {
                        curr : 1
                        //重新从第 1 页开始
                    },
                    where : {
                        name : demoReload.val()
                    }
                });
            }
        };

        $('.demoTable .layui-btn').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>
<script type="text/html" id="toolbtn">
    <a  class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

简单代码让WordPress 支持电子邮箱(Email)作为登录名

在谷歌中以“Email 登陆 WordPress”为关键词搜索,发现代码都是很长很复杂的,都快比上旧社会女人的裹脚布了。偶然发现一段较简单的代码可以实现Word...

21090
来自专栏互联网杂技

前端工作面试经典问题(超级全)

本文包含了一些用于考查候选者的前端面试问题。不建议对单个候选者问及每个问题 (那需要好几个小时)。只要从列表里挑选一些,就能帮助你考查候选者是否具备所需要的技能...

39180
来自专栏自由而无用的灵魂的碎碎念

多层次探秘Windows Vista的区域与语言选项和多语言版本问题

之前,一直想深入了解下Windows Vista Ultimate的英文版与中文版有什么详细的区别,因为Ultimate版支持多国语言。这便萌生了写这篇文章的想...

11230
来自专栏一个会写诗的程序员的博客

前端布局单位选择之 rem

进行布局的话建议用less去写,因为less中可以用变量,这样我们可以省去频繁用计算器的时间了。

15110
来自专栏阿炬.NET

微信分享代码

57090
来自专栏雨过天晴

原 荐 C# FTP 坑了我两天的一个坑

1.4K70
来自专栏零基础使用Django2.0.1打造在线教育网站

爬取猫眼电影TOP100榜单所有信息

哈哈哈,同志们好久不见,今天来教大家如何爬取猫眼电影TOP100榜单的所有信息。猫眼电影这个网站可以说设计的非常规范,非常适合小白练手去获得自豪感。所以话不多说...

57910
来自专栏魂祭心

原 Data Access Compone

35460
来自专栏知道一点点

用js+cookie实现商城的购物车功能

<input name="buy" type="image" alt="第一个商品" src="images/buy.gif" align="middle" o...

26920
来自专栏非著名程序员

常见面试第四题之requestLayout, invalidate和postInvalidate的异同

requestLayout, invalidate和postInvalidate的异同 ? 今天我们来讲讲在面试当中最常见的,最常常被问到的第四题,近期由于小...

26550

扫码关注云+社区

领取腾讯云代金券