<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>在线报名</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/css/layui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<style>
.layui-form-select dl dd.layui-this {
background-color: rgb(20,56,132);
}
.layui-btn{
background-color: rgb(20,56,132);
}
.layui-input-block{
margin-left: 0px;
}
.submitbutton{
display: flex;
justify-content: center;
}
</style>
</head>
<body style="background: #f7f7f7">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 25px;">
<legend>在线报名</legend>
</fieldset>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">系列名称</label>
<div class="layui-input-inline">
<select name="system" id="system" lay-filter="system">
<option value=""></option>
</select>
</div>
<label class="layui-form-label">课程名称</label>
<div class="layui-input-inline">
<select name="article" id="article" lay-filter="article">
<option value=""></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">培训时间</label>
<div class="layui-input-inline">
<select name="modules" lay-verify="required" lay-search="">
<option value="">直接选择或搜索选择</option>
<option value="1">2020年11月11日-2020年12月12日</option>
<option value="2">2020年11月11日-2020年12月12日</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓 名</label>
<div class="layui-input-inline">
<input type="text" name="username" 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-inline">
<input type="text" name="username" 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-inline">
<input type="text" name="username" 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-inline">
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block submitbutton">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="sub">立即提交报名</button>
</div>
</div>
</form>
<script>
layui.use(['form', 'util', 'laydate','layer'], function(){
var form = layui.form;
var layer = layui.layer;
var util = layui.util;
var laydate = layui.laydate;
var $=layui.jquery;
$.ajax({
url:'http://www.tectest.com/index/coursesarticle/get_sys_lists',
dataType:'json',
type:'get',
success:function (e){
if(e.code!=200){
layer.msg('网络错误');
return false;
}else{
// console.log(e.data);
$.each(e.data,function (index,value){
$('#system').append(new Option(value.name,value.id));
});
layui.form.render("select");
}
}
});
form.on('select(system)',function(e){
$.ajax({
url:'http://www.tectest.com/index/coursesarticle/get_sys_lists?pid='+e.value,
dataType:'json',
type:'get',
success:function (e){
if(e.code!=200){
layer.msg('网络错误');
return false;
}else{
$('#article').empty();
$('#article').append(new Option('请选择',''));
$.each(e.data,function (index,value){
$('#article').append(new Option(value.courses_name,value.id));
});
layui.form.render("select");
}
}
});
});
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return '标题至少得5个字符啊';
}
}
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
});
//提交事件
form.on('submit(sub)', function(data){
// alert(JSON.stringify(data.field), {
// title: '最终的提交信息'
// })
console.log(data)
return false;
});
// //表单取值
// layui.$('#LAY-component-form-getval').on('click', function(){
// var data = form.val('example');
// alert(JSON.stringify(data));
// });
});
</script>
</body>
</html>
标签：function,form,layui,value,nbsp,联动,data,仅供参考 From： https://www.cnblogs.com/ccdr/p/16617514.html