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下高性能字符串连接StringBuffer类
Aug 16 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
JavaScript实现换肤功能
Sep 15 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 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
理解和运用PHP中的多态性[译]
2011/08/02 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
js的回调函数详解
2015/01/05 Javascript
原生js实现日期联动
2015/01/12 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
python正则分组的应用
2013/11/10 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
python实现Adapter模式实例代码
2018/02/09 Python
python操作excel的方法
2018/08/16 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
幼儿园教学随笔感言
2014/02/23 职场文书
新年寄语大全
2014/04/12 职场文书
募捐倡议书
2014/04/14 职场文书
销售竞赛活动方案
2014/08/23 职场文书
2014年车间工作总结
2014/11/21 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android