How to add an input box dynamically using Jquery

How to add an input box dynamically using Jquery

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:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

<! -- 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-goals-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-default" type = "button" data-role = "item-add"> 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 = 'den den 'name = 'goals' value = '" + obj + "'> <button type = 'button 'class = 'close delete-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'> × </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 ("added successfully"). slideDown (). delay (3000). hide (1000 ); } Else { $ ("# OnFailureDiv" pai.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.