解决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 相关文章推荐
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
将数组写入txt文件 var_export
2009/04/21 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
JS实现css hover操作的方法示例
2017/04/07 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
python:socket传输大文件示例
2017/01/18 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
python线程中的同步问题及解决方法
2019/08/29 Python
django admin 添加自定义链接方式
2020/03/11 Python
python读取xml文件方法解析
2020/08/04 Python
服装创业计划书范文
2014/02/05 职场文书
租车协议书
2015/01/27 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
小学英语教学随笔
2015/08/14 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫