Jquery动态添加输入框的方法


Posted in Javascript onMay 29, 2015

本文实例讲述了Jquery动态添加输入框的方法。分享给大家供大家参考。具体实现方法如下:

<!-- 页头 --> 
<#include "../common/head.ftl"> 
<div id="onFailureDiv" class="alert alert-danger navbar-fixed-top" style="text-align:center; display:none"></div> 
<div class="container" style="min-height:100%; height:100%;margin-top:100px;"> 
<form id="addressForm" class="form-horizontal" method="post" action="/restaurant/${(user.userId)}/addAddress"> 
  <div class="form-group dynamic-collection" id="course-goals-form-group"> 
  <div class="col-md-2 control-label"><label>地址</label></div> 
  <div class="col-md-8 controls"> 
   <ul id="ItemCourseList" class="list-group sortable-list" data-role="list" style="margin-bottom:10px;"></ul> 
   <div class="input-group"> 
   <input id="courseInput" type="text" data-role="item-input" class="form-control"> 
   <span class="input-group-btn"> 
    <button id="addItemCourse" class="btn btn-default" type="button" data-role="item-add" >添加</button> 
   </span> 
   </div> 
  </div> 
  </div> 
 </form>  
<!-- container --> 
</div> 
<script type="text/javascript" src="${app.basePath}/resources/js/jquery.form.js"></script> 
<script> 
 $.schoolFn = { 
 addCourseItem: function(obj){ 
  $("#ItemCourseList").append("<li class='list-group-item clearfix'><span class='glyphicon glyphicon-resize-vertical sort-handle'></span>"+obj+"<input type='hidden' name='goals' value='"+obj+"'><button type='button' class='close delete-btn deleteItem' onclick='deleteCourseItem(this);' title='删除'>×</button></li>"); 
 }, 
 addItem: function(obj){ 
  $("#itemList").append("<li class='list-group-item clearfix'><span class='glyphicon glyphicon-resize-vertical sort-handle'></span>"+obj+"<input type='hidden' name='audiences' value='"+obj+"'><button type='button' class='close delete-btn deleteItem' onclick='deleteItem(this);' title='删除'>×</button></li>"); 
 }, 
 } 
 $("#addItemCourse").click(function(){ 
  var item=$('#courseInput').val(); 
  if(item.trim()==""){ 
  $('#courseInput').val(""); 
  }else{ 
  $.schoolFn.addCourseItem(item); 
  $('#courseInput').val(""); 
  } 
 }); 
 function deleteCourseItem(obj){ 
  $(obj).parent().replaceWith(""); 
 } 
</script> 
<script> 
 $(document).ready(function(){ 
  $('#addressForm').ajaxForm(function(json) { 
   if(json.status == "success") { 
    $("#onFailureDiv").html("添加成功").slideDown().delay(3000).hide(1000); 
   }else { 
    $("#onFailureDiv").html(json.errorMsg).slideDown().delay(3000).hide(1000); 
   } 
  }); 
 }); 
</script> 
<!-- 页脚 --> 
<#include "../common/footer.ftl"/>

效果图如下:

Jquery动态添加输入框的方法

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
angular十大常见问题
Mar 07 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
小程序使用分包的示例代码
Mar 23 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 #Javascript
JQuery控制Radio选中方法分析
May 29 #Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 #Javascript
js实现发送验证码后的倒计时功能
May 28 #Javascript
JS实现两表格里数据来回转移的方法
May 28 #Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 #Javascript
jQuery实现html表格动态添加新行的方法
May 28 #Javascript
You might like
建立动态的WML站点(三)
2006/10/09 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
python 多进程通信模块的简单实现
2014/02/20 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
python3中zip()函数使用详解
2018/06/29 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
python对Excel的读取的示例代码
2020/02/14 Python
python判断元素是否存在的实例方法
2020/09/24 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
python中random模块详解
2021/03/01 Python
C语言编程题
2015/03/09 面试题
什么是servlet
2012/05/08 面试题
小学教师自我鉴定
2013/11/07 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
集中采购方案
2014/06/10 职场文书
Redis入门教程详解
2021/08/30 Redis
Tomcat弱口令复现及利用
2022/05/06 Servers