Jquery dynamic input box method, jquery dynamic input box

Jquery dynamic input box method, jquery dynamic input box

This example describes how to dynamically add an input box to Jquery. Share it with you for your reference. The specific implementation method is as follows:

<! -- Page header --> <# include ".. /common/head. ftl "> <div id =" onFailureDiv "class =" 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-g Oals-form-group "> <div class =" col-md-2 control-label "> <label> address </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-de Fault "type =" button "data-role =" item-add "> add </button> </span> </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 = 'den den 'name = 'goals' value = '" + obj + "'> <button type = 'button 'class = 'close delet E-btn deleteItem 'onclick = 'deleteurseitem (this); 'title = 'delete'> × </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 = 'den den 'name = 'audiences' value = '" + obj + "'> <button type = 'call' class = 'close delete-btn deleteItem 'onclick = 'deleteitem (this ); 'title = 'delete'> × </B Utton> </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 ("added successfully "). slideDown (). delay( 3000 ). hide (1000);} else {$ ("# onFailureDiv" ).html (json. errorMsg ). slideDown (). delay( 3000 ). hide (1000) ;}};}); </script> <! -- Footer --> <# include "../common/footer. ftl"/>

As follows:

I hope this article will help you with jQuery programming.