LayUI+JavaScript生成动态表单及提交

最新推荐文章于 2024-06-24 23:23:11 发布

liusq_

最新推荐文章于 2024-06-24 23:23:11 发布

阅读量9k

点赞数 5

分类专栏： # Layui 文章标签： LayUI JavaScript

本文链接：https://blog.csdn.net/qq_39159076/article/details/100132248

版权

Layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

LayUI动态表单是在Vue+Element-UI动态表单生成及提交之前做的
LayUI效果如下：在这里插入图片描述
~~引入需要的文件~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--  引入JQuery -->
    <script type="text/javascript" src="../../js/jquery-1.9.0.min.js" ></script>
    <!--  引入LayUI的JS文件-->
    <script src="../../layui/layui.js" charset="utf-8"></script>
    <!--  getURL方法-->
    <script src="../../js/url.js"></script>
    <!--  引入LayUI的CSS文件-->
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
    <style>
        .user_left{ width:45%; float: left; margin:20px 0 0 5%; }
    </style>
    <title>LayUI+JavaScript生成动态表单及提交</title>

发起请求，生成前端代码

~~这里是重点~~
~~这里是重点~~
~~这里是重点~~

    <script>
        $(function() {	//页面加载时执行
            $.ajax({	//获取属性List<Map>数据
                type:"get",
                url:getURL("properties"),
                dataType : "json",
                success:function(data) {
                	//遍历List
                	for(var i = 0 ; i  < data.length ; i++){
                        //根据属性List拼接LayUI风格的input代码
                        str =   "<div class='layui-form-item'><label class='layui-form-label'>"
                            +data[i].propertyShow
                            +"</label><div class='layui-input-block'><input type='text' id='"
                            +data[i].propertyName
                            +"' name='"
                            + data[i].propertyName
                            +"' placeholder='"
                            +data[i].propertyTips
                            +"' class='layui-input'></div></div>"
                        
                        //追加到界面，property是后面div的id<div class="user_left" id="property">
                        var html = document.getElementById("property").innerHTML;
                        document.getElementById("property").innerHTML= html + str;
                    }
                }
            });
        })
    </script>
</head>

check（）方法校验表单及提交

ajax请求中
data: new FormData($("#addForm")[0])
~~这句是重点~~
~~这句是重点~~
~~这句是重点~~

<body>
<script>
    //表单提交时调用的验证及提交方法
    function check() {
        if ($("#title").val() == '') {
            alert("请填写完整信息");
        } else {
            $.ajax({
                type: "POST",
                url: getURL("insert"),
                data: new FormData($("#addForm")[0]),	//获取表单数据，addForm是表单id
                processData: false,
                contentType: false,
                success: function (data) {
                	alert(data)
                	if (data == 'success') {
                		$("input[type=reset]").trigger("click");	//清空表单
                	}
                }
            })
        }
    }
</script>

表单

<form class="layui-form" name="addForm" id="addForm">
    
    <div class="user_left" id="property">
        <!-- 一个标准的input组合，这个是固定项 -->
        <div class="layui-form-item">
            <label class="layui-form-label">节目名称</label>
            <div class="layui-input-block">
                <input type="text" id="title" name="title" lay-verify="required" class="layui-input">
            </div>
        </div>
        
        <!-- 根据属性List生成的input追加在这里-->
    </div>
    
    
    <!-- buttons -->
    <div class="layui-form-item" style="margin-left: 5%;">
        <div class="layui-input-block">
            <!-- 这里的提交按钮是button形式，不是submit -->
            <input type="button" id="insert" onclick="return check()" class="layui-btn" value="确认添加" />
            <!-- 清空表单，这个按钮隐藏了 -->
            <input type="reset" name="reset" style="display: none;" />
            <!-- 列表按钮，跳转到别的界面 -->
            <input type="button" id="channelList" class="layui-btn" onclick="window.location.href=getURL('pages/property/list.html')" value="查看所有节目"/>
        </div>
    </div>
</form>
</body>
</html>

代码外：
property请求的List结果如下：

[
    {
        "id": 2, 
        "propertyName": "actors", 
        "propertyShow": "演员", 
        "propertyTips": "演员"
    }, 
    {
        "id": 3, 
        "propertyName": "points", 
        "propertyShow": "评分", 
        "propertyTips": "0-10分"
    }, 
    {
        "id": 9, 
        "propertyName": "desc", 
        "propertyShow": "简介", 
        "propertyTips": "节目简介"
    }, 
    {
        "id": 13, 
        "propertyName": "shuxing", 
        "propertyShow": "属性", 
        "propertyTips": "123"
    }
]

liusq_

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
3
评论
LayUI+JavaScript生成动态表单及提交

LayUI动态表单是在Vue+Element-UI动态表单生成及提交之前做的LayUI效果如下：引入需要的文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">  <script type="t...
复制链接

扫一扫

专栏目录