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或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
JavaScript中对象介绍
Dec 31 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
js实现右键菜单功能
Nov 28 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 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安全开发库中文详细介绍
2015/03/22 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
jquery自动填充勾选框即把勾选框打上true
2014/03/24 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
python链接Oracle数据库的方法
2015/06/28 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
资料员的岗位职责
2013/11/20 职场文书
四年的大学生生活自我评价
2013/12/09 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
《日月潭》教学反思
2014/02/28 职场文书
电视购物广告词
2014/03/19 职场文书
中队活动总结
2014/08/27 职场文书
python实现图片批量压缩
2021/04/24 Python
Python基础详解之描述符
2021/04/28 Python