Jquery动态添加输入框的方法

 更新时间:2015年05月29日 10:04:26   作者:wo_soul  
这篇文章主要介绍了Jquery动态添加输入框的方法,实例分析了jQuery中append方法添加页面元素的使用技巧,需要的朋友可以参考下

本文实例讲述了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实现计算器功能

    jQuery实现计算器功能

    这篇文章主要为大家详细介绍了jQuery实现计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • jquery滚动条插件slimScroll使用方法

    jquery滚动条插件slimScroll使用方法

    这篇文章主要为大家详细介绍了jquery滚动条插件slimScroll的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jQuery通过ajax快速批量提交表单数据

    jQuery通过ajax快速批量提交表单数据

    这篇文章主要为大家详细介绍了jQuery通过ajax快速批量提交表单数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • jQuery基础知识小结

    jQuery基础知识小结

    本文主要通过jQuery基础知识、选择要操作的元素及处理DOM元素3个方面给我们做了下小结,非常的详尽,推荐给有需要的小伙伴。
    2014-12-12
  • jquery高效反选具体实现

    jquery高效反选具体实现

    反选想必大家都有一个比较独特的方法吧,下面与大家分享下利用jquery实现高效反选,具体代码如下感兴趣的朋友可以参考下哈
    2013-05-05
  • 通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)

    通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)

    相信大家喜欢这个界面无非也是喜欢它的动态磁贴。刚好今天研究了一下如何通过JQuery在网页上模仿这种效果,就贴出来给大家喷一下。虽然是一些很低级的技术,但是也希望有需要的朋友可以参考下
    2013-07-07
  • jQuery实现只允许输入数字和小数点的方法

    jQuery实现只允许输入数字和小数点的方法

    这篇文章主要介绍了jQuery实现只允许输入数字和小数点的方法,涉及jQuery针对键盘事件的响应及字符串操作的相关技巧,需要的朋友可以参考下
    2016-03-03
  • 为jQuery增加join方法的实现代码

    为jQuery增加join方法的实现代码

    正在做一个在线书签管理的站点,有需要这样一个功能,把匹配节点的id或值拼合起来以用来传递参数。
    2010-11-11
  • jQuery Easyui实现左右布局

    jQuery Easyui实现左右布局

    jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件。接下来通过本文给大家介绍jQuery Easyui实现左右布局,涉及到到easyui左右布局相关知识,感兴趣的朋友一起学习吧
    2016-01-01
  • jQuery中(function(){})()执行顺序的理解

    jQuery中(function(){})()执行顺序的理解

    function的顺序是这样的:先计算第一个小括号,发现里面的表达式是一个函数,返会该匿名函数的引用(指针),最后一个括号则是建立匿名函数的实参和并执行,感兴趣的你可以参考下本文
    2013-03-03

最新评论