layui弹出层表单提交
时间: 2023-09-26 17:05:59 浏览: 143
layui弹出层按钮提交iframe表单的方法
在layui中,可以使用弹出层来创建表单并进行提交。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui弹出层表单提交</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
<button class="layui-btn" onclick="openForm()">打开表单</button>
<!-- 表单弹出层 -->
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
layui.use('layer', function(){
var layer = layui.layer;
function openForm() {
layer.open({
type: 1,
title: '表单提交',
area: ['500px', '300px'],
content: `
<form class="layui-form" lay-filter="myForm">
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input type="text" name="username" 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="formSubmit">提交</button>
</div>
</div>
</form>
`,
success: function(layero, index){
var form = layui.form;
// 表单提交监听
form.on('submit(formSubmit)', function(data){
console.log(data.field); // 可以在这里进行提交表单数据的操作
layer.close(index); // 关闭弹出层
return false; // 阻止表单默认提交
});
}
});
}
});
</script>
</body>
</html>
```
在上述代码中,点击"打开表单"按钮后,会弹出一个包含姓名输入框和提交按钮的弹出层。当点击提交按钮时,会触发表单提交监听函数,你可以在该函数中进行表单数据的处理和提交操作。同时,弹出层会被关闭。
阅读全文