Dynamically add jQuery form fields

Question

var count_input = 0; function addFiel () { var telnum = parseInt($('#add_field_area').find('div.add:last').attr('id').slice(3))+1; $('div#add_field_area').append('<div id="add'+telnum+'" class="add"><label> Поле №'+telnum+'</label><input type="text" width="120" name="val[]" id="val" value=""/><div id="ad_f"><div id="dob0" class="dob"></div><div onclick="addD();" class="addbutton">Еще новое</div></div><div class="deletebutton" onclick="deleteField('+telnum+');"></div></div>'); } function addD () { var tel = parseInt($('#ad_f').find('div.dob:last').attr('id').slice(3))+1; $('div#ad_f').append('<div id="dob'+tel+'" class="dob"></div><input type="text"></div><div class="deletebutton" onclick="deleteField('+tel+');">'); } function deleteField (id) { $('div#add'+id).remove(); }

 input { height: 20px; margin: 5px; width:400px; } .addbutton { text-align: center; vertical-align:middle; font-size: 13px; width: 283px; border: 1px solid #70A9FD; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; cursor: pointer; margin: 2px 0 0 110px; color: #326DC5; padding: 4px; background-color:#BED6FF; } .deletebutton { width: 20px; height: 22px; cursor: pointer; margin: 5px; display:inline-block; background: url(delete.png) repeat; background-position: center center; background-repeat: no-repeat; position:absolute; top: 1px; left: 480px; } .add { position:relative; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="add_field_area"> <div id="add0" class="add"> </div> </div> <div onclick="addFiel();" class="addbutton">Добавить новое поле</div>

When you click on the button ADD NEW FIELD, add two fields. After that, click on the button MORE NEW for the field №2 and the addition takes place in the field №1 and the field №2. How to make each field have its own buttons?

Accepted Answer · 2015-09-01T20:19:59

Use event ascent and go to the desired container:

 $(document).on('click', ".container .add-group", function() { var container = $(this).closest(".container"); container.append( $("#group-template").html() .replace(/\{\{g\}\}/g, container.children(".group").last().data("i") + 1 || 1) ); }).on('click', ".group .add-field", function() { var group = $(this).closest(".group"); group.append( $("#field-template").html() .replace(/\{\{g\}\}/g, group.data("i")) .replace(/\{\{f\}\}/g, group.children(".field").last().data("i") + 1 || 1) ); }).on('click', ".group .field .remove-field", function() { $(this).closest(".field").remove(); });

 section { border: 1px solid; margin: 1em 0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script id=group-template type=text/html> <section class=group data-i={{g}}> <p> <label for=g-{{g}}>Группа {{g}}</label> <input type=text id=g-{{g}} /> <button class=add-field>Add field</button> </p> </section> </script> <script id=field-template type=text/html> <p class=field data-i={{f}}> <label for=f-{{g}}-{{f}}>Поле {{f}}</label> <input type=text id=f-{{g}}-{{f}} /> <button class=remove-field>Remove field</button> </p> </script> <div class=container> <button class=add-group>Add group</button> </div>

PS: It is better to use the normal template engine.

What is missing is the removal, it would be cool at all - Alex Prosto

Dynamically add jQuery form fields

1 answer 1

More articles: