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 相关文章推荐
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
在jquery中combobox多选的不兼容问题总结
Dec 24 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
原生js实现照片墙效果
Oct 13 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
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
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
python实现网页链接提取的方法分享
2014/02/25 Python
简单的通用表达式求10乘阶示例
2014/03/03 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
PyTorch预训练的实现
2019/09/18 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
python 函数中的参数类型
2020/02/11 Python
keras topN显示,自编写代码案例
2020/07/03 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
美国校服网上商店:French Toast
2019/10/08 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
九年级历史教学反思
2014/01/27 职场文书
软件项目实施计划书
2014/05/02 职场文书
公司活动总结怎么写
2014/06/25 职场文书
就业意向协议书
2015/01/29 职场文书
档案工作个人总结
2015/03/03 职场文书
国庆阅兵观后感
2015/06/15 职场文书
暑假生活随笔
2015/08/15 职场文书
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers