解决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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
Aug 22 Javascript
React实现动效弹窗组件
Jun 21 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中ADODB类详解
2008/03/25 PHP
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
php简单统计中文个数的方法
2016/09/30 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
js压缩利器
2007/02/20 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
2016/08/01 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
简单了解python关系(比较)运算符
2019/07/08 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
Keras load_model 导入错误的解决方式
2020/06/09 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
销售心得体会
2014/01/02 职场文书
家长给学校的建议书
2014/05/15 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
2014年医院工作总结
2014/11/20 职场文书
Python3 如何开启自带http服务
2021/05/18 Python