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

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>
    
使用Layui可以通过JavaScript代码动态生成表单。以下是一个示例: ```html <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-inline"> <input type="text" name="username" required 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="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script> //动态生成表单layui.use('form', function(){ var form = layui.form; var html = '<div class="layui-form-item"><label class="layui-form-label">邮箱</label><div class="layui-input-inline"><input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input"></div></div>'; $('.layui-form').append(html); form.render(); //重新渲染表单 }); </script> ``` 上述代码中,我们使用了Layui的`form`模块来渲染表单,然后使用jQuery的`append()`方法动态添加了一个邮箱输入框。最后使用`form.render()`方法重新渲染表单,使新添加的内容生效。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值