解决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 相关文章推荐
JavaScript常用脚本汇总(一)
Mar 04 Javascript
JavaScript数据类型详解
Apr 01 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
微信小程序的引导页实现代码
Jun 24 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
建立动态的WML站点(一)
2006/10/09 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
世界上最大的二手相机店:KEN
2017/05/17 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
档案信息化建设方案
2014/05/16 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
全民创业工作总结
2015/08/13 职场文书
js 数组 fill() 填充方法
2021/11/02 Javascript