 [jquery] Dynamiczny formularz - usuwanie elementów |
  |
| [jquery] Dynamiczny formularz - usuwanie elementów |
 8.09.2016, 15:13:15
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 49 Pomógł: 0 Dołączył: 11.12.2008 Ostrzeżenie: (0%) 
 |
Witam,
Mam formularz z dynamicznie dodawanymi polami select i input. Jak zrobić możliwość usunięcia wcześniej nowo utworzonego pola? Kod <html> <head> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> <script> $.validator.messages.max = jQuery.validator.format("Your totals mustn't exceed {0}!"); $.validator.addMethod("quantity", function(value, element) { return !this.optional(element) && !this.optional($(element).parent().prev().children("select")[0]); }, "Please select both the item and its amount."); $().ready(function() { $("#orderform").validate({ errorPlacement: function(error, element) { error.appendTo(element.parent().next()); }, highlight: function(element, errorClass) { $(element).addClass(errorClass).parent().prev().children("select").addClass(errorClass); } }); var template = jQuery.validator.format($.trim($("#template").val())); function addRow() { $(template(i++)).appendTo("#orderitems tbody"); } var i = 1; // start with one row addRow(); // add more rows on click $("#add").click(addRow); }); </script> <style>form.cmxform{width:50em;}em.error{background:url("unchecked.gif") no-repeat 0px 0px;padding-left:16px;}em.success{background:url("checked.gif") no-repeat 0px 0px;padding-left:16px;}form.cmxform label.error{margin-left:auto;width:250px;}form.cmxform input.submit{margin-left:0;}em.error{color:black;}#warning{display:none;}select.error{border:1px dotted red;}</style> </head> <body> <div id="main"> <textarea style="display:none" id="template"> <tr> <td> <label>{0}. Item</label> </td> <td class='type'> <select name="item-type-{0}"> <option value="">Select...</option> <option value="0">Learning jQuery</option> <option value="1">jQuery Reference Guide</option> <option value="2">jQuery Cookbook</option> <option vlaue="3">jQuery In Action</option> <option value="4">jQuery For Designers</option> </select> </td> <td class='quantity'> <input size='4' class="quantity" min="1" id="item-quantity-{0}" name="item-quantity-{0}"> </td> <td class='quantity-error'></td> </tr> </textarea> <form id="orderform" class="cmxform" method="post" action="result.php"> <h2 id="summary"></h2> <fieldset> <table id="orderitems"> <tbody></tbody> <tfoot> <tr> <td colspan="2"> </td> <td> <input class="submit" type="submit" value="Submit"> </td> </tr> </tfoot> </table> </fieldset> </form> <button id="add">Add another input to the form</button> <h1 id="warning">Your form contains tons of errors! Please try again.</h1> </p> </div> </body> </html> Ten post edytował e-konrad 8.09.2016, 15:14:18 |
 |
 
|
|
|
Wersja Lo-Fi | Aktualny czas: 24.04.2024 - 17:01 |
