解决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 相关文章推荐
工作中常用到的JS表单验证代码(包括例子)
Nov 11 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
js的三种继承方式详解
Jan 21 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
JS实现公告上线滚动效果
Jan 10 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
防止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 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
页面乱码问题的根源及其分析
2013/08/09 PHP
JS删除数组元素的函数介绍
2013/03/27 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
学习python的几条建议分享
2013/02/10 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
Python列表(List)知识点总结
2019/02/18 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
求职信的要素有哪些呢
2013/12/26 职场文书
村委会主任先进事迹
2014/01/15 职场文书
新学期决心书
2014/03/11 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
公司周年庆典标语
2014/10/07 职场文书
骨干教师考核评语
2014/12/31 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电