layer.open弹出框不能获取input框的值为空

最近使用layer框架来做页面弹出框操作。总是不能获取弹出框中input的值,代码如下:红色标记区域

添加js代码

 //Ajax添加品牌
	function addBrandWI(){
		layer.open({
			  type: 0,
			  title: '品牌添加',
			  shadeClose: true,
			  shade: 0.8,
			  btn: ['保存', '取消'],
			  area: ['40%', '70%'],
			  content: $('#add_Brand').html(),
			  yes:function(index, layero){
				  subForm();
				  layer.close(index);
			  },cancel: function(){}
			});  
	}
	 
	function subForm(){
		var bname=$("#brandname").val();
		  $.ajax({
	          url: 'salecenter.jsp?act=savaBrand&bname='+bname,
	          type: "GET",
	          dataType: "json",  //返回json格式的数据
	          async: true,
	          success: function (data) {
	              if (data == '0') {
	            	  layer.alert("品牌添加成功");
	              } else if(data == '1'){
	            	  layer.alert("品牌添加失败");
	              }else if(data == '2'){
	            	  layer.alert("此品牌已经存在");
	              }
	          }, error: function() {
	          }
	      });
	  }
添加html代码

<!-- 弹出框添加品牌 -->
<div id="add_Brand" style="display:none;">
				<form autocomplete="off"  id="sub_form"  method="post">
					<div class="add_model">
						<div>
							<b class="out">*</b>品牌名称:
						</div>
						<div>
							<input name="brandname" id="brandname" type="text" value=""/>
						</div>
					</div>
				</form>
</div>

弹出框如下图:


点击保存就是不能获取input的值,总是为空字符串。

后来在网上查找资料,原来这是个比较普遍的bug,原来是layer.open的content参数(上面红色标记代码),应该写成

content: $('#add_Brand'),不要后面的html(),去掉后调试正常获取了input的值,解决问题就行,也没有去深究这个是什么原因(关键也没那个时间)。

layui是一个轻量级的前端UI架,它提供了一个便捷的方式来创建弹出窗口,通常用于显示表单等需要用户交互的内容。要在layui中展示包含表单的弹出,你可以按照以下步骤操作: 1. 首先,在HTML结构中引入layui的CSS和JS文件。 ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> ``` 2. 使用layui的`layer.open()`函数打开一个弹窗,传入一个配置对象。其中,可以设置`type`属性为`form`,然后指定弹出内容,比如一个HTML片段或者通过字符串形式的数据动态构建表单。 ```javascript var formHtml = '<form class="layui-form">' + '<input type="text" lay-verify="" placeholder="请输入内容"/>' + '</form>'; // 这里是一个简单的表单示例 // 弹出带表单的窗口 layui.use(['layer', 'form'], function () { var layer = layui.layer; var form = layui.form; layer.open({ type: 2, // 2表示加载外部页面 title: '表单', shadeClose: true, // 关闭遮罩层时关闭弹窗 area: ['auto', 'auto'], content: formHtml, btn: ['提交', '取消'], // 提交和取消按钮 yes: function(index, layero, formo) { // 确定按钮点击后的回调 form.layFormSubmit(formo); // 如果有表单验证,这里触发提交 layer.close(index); }, no: function() { // 取消按钮点击后的回调 layer.close(index); } }); }); ``` 在这个例子中,当用户点击“提交”按钮时,你需要编写`layFormSubmit`函数来处理表单数据。如果不需要验证,可以直接获取表单元素并发送到服务器。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值