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实现无限分级横向导航菜单的方法
Mar 12 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
webpack的移动端适配方案小结
Jul 25 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 判断服务器操作系统的类型
2014/02/17 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
使用vue.js编写蓝色拼图小游戏
2017/03/17 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
vue表单自定义校验规则介绍
2018/08/28 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
在Django的视图中使用form对象的方法
2015/07/18 Python
python实现抖音视频批量下载
2018/06/20 Python
python取余运算符知识点详解
2019/06/27 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
python 解压、复制、删除 文件的实例代码
2020/02/26 Python
python的launcher用法知识点总结
2020/08/07 Python
YSL圣罗兰美妆官方旗舰店:购买YSL口红
2018/04/16 全球购物
高二政治教学反思
2014/02/01 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
党建目标管理责任书
2014/07/25 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
2015年见习期工作总结
2014/12/12 职场文书
Python软件包安装的三种常见方法
2022/07/07 Python