form表单

简单的表单

表单提交
自定义ajax提交
radio回显
select回显
html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.23/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<h1>测试表单提交</h1>
<form class="layui-form" action="/admin/category/add" >
    <div class="layui-form-item">
        <label class="layui-form-label">类目名称</label>
        <div class="layui-input-block">
            <input type="text" name="categoryName" lay-verify="required" 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 id="categorySelect">
            </select>
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="显示" checked>
            <input type="radio" name="status" value="2" title="隐藏">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <!--下面的这个是走的form表单提交-->
<!--            <button type="submit" class="layui-btn">立即提交</button>-->
            <button type="button" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>

    </div>
</form>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.23/dist/layui.js"></script>
<script>
    layui.use(['form', 'laydate', 'util'], function(){
        var form = layui.form;
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;

        //*********************radio******************
        // 假设这是从服务器获取到的状态
        var currentStatus = '2'; // 或者 '2'
        // 根据获取到的状态设置radio选中项
        $("input[name='status'][value='"+currentStatus+"']").prop("checked", true);

        // 重要：重载表单，以更新视觉效果
        form.render('radio');
        //*********************radio******************

        //********************* select ******************
        let categoryList = [
            {
                "val":"key1",
                "label":"选项1",
            },
            {
                "val":"key2",
                "label":"选项2",
            }
        ]
        let selectedCategory = 'key2'; // 需要回显的值
        // 获取select元素
        var select = document.getElementById('categorySelect');

        // 动态添加options
        categoryList.forEach(function(item){
            var option = new Option(item.label, item.val);
            if (item.key === selectedCategory) {
                option.selected = true; // 设置默认选中项
            }
            select.add(option);
        });
        // 重要：重载表单，以更新视觉效果
        form.render('select');
        //********************* select ******************

        form.on('submit(demo1)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            return true; // 阻止默认 form 跳转
        });
    });
</script>
</body>
</html>
form表单 ​

简单的表单 ​

form表单

简单的表单
