layui 表单动态添加、删除input框

html部分

<div class="layui-form-item" ><label class="layui-form-label">路线</label><div class="layui-input-block" id="last"><div class="layui-input-inline">{empty name="$ways"}<div class="layui-form-item"><div class="layui-input-inline"><input type="text" name="ways[]" placeholder="请输入"autocomplete="off" class="form-control" style="width: 200%;"></div><div class="layui-input-block" style="margin-left: 480px"><button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm"><i class="layui-icon">&#xe654;</i></button></div></div>{else /}<!-- 循环列出数据 -->{volist name="ways" id="vo"}<div class="layui-form-item"><div class="layui-input-inline"><input type="text" name="ways[]" lay-verify="required" value="{$vo.name}"class="form-control" style="width: 200%;"></div><div class="layui-input-block" style="margin-left: 480px"><button type="button"class="layui-btn layui-btn-danger layui-btn-sm removeclass"><iclass="layui-icon">&#xe67e;</i></button></div></div>{/volist}<div class="layui-form-item"><div class="layui-input-inline"><input type="text" name="ways[]" placeholder="请输入"autocomplete="off" class="form-control" style="width: 200%;"></div><div class="layui-input-block" style="margin-left: 480px"><button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm"><i class="layui-icon">&#xe654;</i></button></div></div>{/empty}</div></div>
</div>

js部分

layui.use(['element', 'jquery', 'layer', 'form', 'laydate'], function () {var form = layui.form, element = layui.element, laydate = layui.laydate, $ = layui.$;//动态添加input输入框$("#add").click(function () {var str = '<div class="layui-form-item">' +'<div class="layui-input-inline">' +'<input type="text" name="ways[]" lay-verify="required"' +'class="form-control" style="width: 200%;">' +'</div>' +'<div class="layui-input-block" style="margin-left: 480px">' +'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>' +'</div>' +'</div>';$("#last").append(str);x++;});//删除动态添加的input输入框$("body").on('click', ".removeclass", function () {//元素移除前校验是否被引用var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();var parentEle = $(this).parent().parent();parentEle.remove();});
})

layui form表单动态添加、删除input框，以及数据回显
在form表单中，动态增加input框，最多添加5个，删除校验

html代码

<form class="layui-form" th:action="@{/basicInfo/update/project}" method="post"><div class="layui-form-item" id="last"><label class="layui-form-label">开发项目核准名</label><div class="layui-input-inline"><input type="text" id="projectApprovalName" name="projectApprovalName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input input-double-width"><input class="layui-input" type="hidden" id="id" name="id"  th:value="${estateInfo.id}"></div><div class="layui-input-inline" style="margin-left: 180px"><button id="add" type="button" class="layui-btn layui-btn-warm layui-btn-sm"><i class="layui-icon">&#xe654;</i></button></div><span class="layui-word-aux">备注：最多添加5个项目核准名，每个长度为2-15个字符</span></div>
</form>

js代码

<script type="text/javascript" th:inline="javascript">layui.use([ 'layer', 'upload'], function () {var $ = layui.jquery;var layer = layui.layer; //加载layer模块var upload = layui.upload;  //加载upload模块var id = $("#id").val();var basePath=[[${#httpServletRequest.getContextPath()}]];//动态添加input输入框var max = 5;var x = 1;$("#add").click(function(){if(x<max){var str =  '<div class="layui-form-item">'+'<label class="layui-form-label"></label>'+'<div class="layui-input-inline">'+'<input type="text" name="projectApprovalName" class="layui-input input-double-width">'+'</div>'+'<div class="layui-input-inline" style="margin-left: 180px">'+'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>'+'</div>'+'</div>';$("#last").append(str);x++;}else {layer.msg("最多添加5条信息",{icon:2});}});//删除动态添加的input输入框$("body").on('click',".removeclass",function(){if(x>1){//元素移除前校验是否被引用var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();var parentEle = $(this).parent().parent();$.ajax({url:basePath+'/basicInfo/findByApprovalNameAndEstateId',type:"get",data:{'id':id,'projectApprovalName':approvalName},dataType:"json",success:function(res){if(res.code!==200){layer.msg('项目核准名 '+approvalName+' 已被引用，禁止删除', {icon: 2, title:'提示'});}else {//移除父元素parentEle.remove();x--;}}});}});//动态回显input值var approvalNameStr = [[${estateInfo.projectApprovalName}]];var approvalNameArr = approvalNameStr.split(',');$.each(approvalNameArr,function (i,json) {if(i===0){$("#projectApprovalName").val(json);}if(i>0){var str =  '<div class="layui-form-item">'+'<label class="layui-form-label"></label>'+'<div class="layui-input-inline">'+'<input type="text" name="projectApprovalName" value="'+json+'" class="layui-input input-double-width">'+'</div>'+'<div class="layui-input-inline" style="margin-left: 180px">'+'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>'+'</div>'+'</div>';$("#last").append(str);}x=i+1;});})
</script>

----------------------------------------------------------------------自己的项目--------------------------------------------------------------------------

<div class="layui-form-item" ><label class="layui-form-label" style="width: 90px;">服务器ip端口</label><div class="layui-input-block" id="last2"><div class="layui-input-inline"><div class="layui-form-item"><div class="layui-input-inline" style="width: 151px;!important;" ><input type="text" name="ways[]"class="layui-input"  required lay-verify="required"  autocomplete="off" class="form-control" style="width: 200%;"></div><div class="layui-input-block" style="margin-left: 310px"><button id="add2" type="button" class="layui-btn layui-btn-warm layui-btn-sm"><i class="layui-icon">&#xe654;</i></button></div></div></div></div></div>

//layui 表单动态添加、删除input框  ---start//动态添加input输入框var x = 1;$("#add2").click(function () {var str = '<div class="layui-form-item"  style="margin-left: 10px;"   > ' +'<div class="layui-input-inline" style="width: 151px;!important;">' +'<input type="text" name="ways[]" lay-verify="required"' +'class="form-control layui-input" style="width: 200%;"   >' +'</div>' +'<div class="layui-input-block" style="margin-left: 310px">' +'<button type="button" class="layui-btn layui-btn-danger layui-btn-sm removeclass"><i class="layui-icon"></i></button>' +'</div>' +'</div>';$("#last2").append(str);x++;});//删除动态添加的input输入框$("body").on('click', ".removeclass", function () {//元素移除前校验是否被引用var approvalName = $(this).parent().prev('div.layui-input-inline').children().val();var parentEle = $(this).parent().parent();parentEle.remove();});//---------end----------

layui 表单动态添加、删除input框相关推荐

element实现form表单动态添加email效果
前言: vue中使用element实现form表单动态添加email效果效果: 实现步骤: 实现源代码: <template><div><el-form ref=&qu ...
antd vue中，如何给表单动态添加input，解决遇到一些坑
最近做项目用的组件库Ant Design Vue,这个组件看起来文档很详细,但也会遇到一些意想不到的问题,最后看文档没办法解决,只能去看源码,折腾了好久,终于把问题给解决了,遇到的问题主要是当添加in ...
layui表单动态CURD功能
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.手残党的搬砖添瓦二.使用步骤 1.引入CSS,JS样式 2.CURD实操总结前言时间:2022-11-15 ...
layui表单单选按钮和下拉框默认选中
单选按钮和下拉框默认选中在使用layui的单选按钮和下拉框时,有时候需要将后台传过来的值使得单选框和下拉菜单默认选中.我的方法是将后台穿过来的值先放在一个隐藏域中,然后再去取值. 1.HTML片 ...
html5表单动态添加,js动态添加表单实例
前段时间因为域名关系网站停了一段时间.别的不多说了,我前端结合php做一个批量建栏目的模块,用到这个对了下点,这个添加input动态添加 name也是可设成不同有,我用的是"text&qu ...
html表单中动态添加下拉框,antd Select下拉菜单动态添加option里的内容操作
antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScop ...
php动态删除输入框,jQuery实现动态添加和删除input框实例代码
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下选项 $(function(){ // 添加选项 $("#opbtn").cli ...
Layui表单复选框验证
Layui表单复选框验证近日由于项目原因使用layui框架进行开发,在做表单验证的时候苦于复选框验证问题找不到答案,于是作为小白的我换了一种思路,不采用官方提供的form-verify,而是采用在提 ...
Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证首先,有这样一个需求,表单中默认有表单项,点击新增,会多出一项. 点击之后官方文档中有写用v-for来实现新增表单,但是那是单表单的新增,现在多表单的 ...

layui 表单动态添加、删除input框

layui 表单动态添加、删除input框相关推荐

最新文章

热门文章