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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
Angular短信模板校验代码
Sep 23 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
PHP使用PDO连接ACCESS数据库
2015/03/05 PHP
curl和libcurl的区别简介
2015/07/01 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
jQuery仿移动端支付宝键盘的实现代码
2018/08/15 jQuery
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
[00:35]DOTA2上海特级锦标赛 MVP.Phx战队宣传片
2016/03/04 DOTA
python 七种邮件内容发送方法实例
2014/04/22 Python
python 默认参数问题的陷阱
2016/02/29 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
美国在线购物频道:Shop LC
2019/04/21 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
外语系毕业生自荐信范文
2013/12/16 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
客户答谢会活动方案
2014/08/31 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
检讨书范文1000字
2015/01/28 职场文书
Python进度条的使用
2021/05/17 Python
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers