解决layer.open弹出框不能获取input框的值为空的问题


Posted in Javascript onSeptember 10, 2019

最近使用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>

弹出框如下图:

解决layer.open弹出框不能获取input框的值为空的问题

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

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

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

以上这篇解决layer.open弹出框不能获取input框的值为空的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 #Javascript
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 #Javascript
解决layer弹出层中表单不起作用的问题
Sep 09 #Javascript
解决layui弹框失效的问题
Sep 09 #Javascript
vue给对象动态添加属性和值的实例
Sep 09 #Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 #Javascript
layui原生表单验证的实例
Sep 09 #Javascript
You might like
php MySQL与分页效率
2008/06/04 PHP
php使用PDO方法详解
2014/12/27 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
理解javascript对象继承
2016/04/17 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
举例讲解Python中的死锁、可重入锁和互斥锁
2015/11/05 Python
python方向键控制上下左右代码
2018/01/20 Python
python生成密码字典的方法
2018/07/06 Python
详解python:time模块用法
2019/03/25 Python
实例详解Python装饰器与闭包
2019/07/29 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
Python设计密码强度校验程序
2020/07/30 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
写给女生的道歉信
2014/01/08 职场文书
反四风对照检查材料
2014/09/22 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
工会积极分子个人总结
2015/03/03 职场文书
导游词之湖北武当山
2019/09/23 职场文书
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技