Dynamically change input names when appending to an existing div

Question

I have a form in which I need to add new inputs based on user interaction. When the page loads, the form looks like this:

<li class="basic">
    <h4 class="secondary-title" style="margin-top: 0px;">Specifications</h4>
    <span style="float: right; margin-top: -40px;"><a href="#" class="add_specification_group"><i class="fa fa-plus-circle"></i> Add group</a></span>
</li>
<li id="specifications">
    <div class="specification_group" style="margin-bottom: 20px;">
        <div class="label">
            Specification group     
        </div>
        <input name="specification_group_title1[]" type="text" class="short" placeholder="Group title" value="">
        <a href="#" class="add_specification_group_field"><i class="fa fa-plus-circle"></i> Add field</a><br />             
        <input name="specification_name1[]" type="text" class="short" placeholder="Name"> 
        <input name="specification_value1[]" type="text" class="short" placeholder="Value"> 
    </div>
</li>

I user can either click on the "Add group" link in order to add a new group, or on the "Add field" link to add fields to one of the existing groups.

The HTML for the group or fields is taken from a template.

<script type="text/template" id="specification_group_template">
    <div class="specification_group" style="margin-bottom: 15px;">
        <div class="label">
            Specification group     
        </div>
        <input name="specification_group_title[]" type="text" class="short" placeholder="Group title" value=""> 
        <a href="#" class="add_specification_group_field"><i class="fa fa-plus-circle"></i> Add field</a><br />             
        <input name="specification_name[]" type="text" class="short" placeholder="Name"> 
        <input name="specification_value[]" type="text" class="short" placeholder="Value">                             
    </div>                        
</script>
<script type="text/template" id="specification_group_field_template">
    <div class="specification_group">                                        
        <input name="specification_name[]" type="text" class="short" placeholder="Name"> 
        <input name="specification_value[]" type="text" class="short" placeholder="Value">                             
    </div>                        
</script>
<script type="text/javascript">
    (function($) {
        $(function() {                                                                
            var groupCount = 1;

            $('.add_specification_group').on('click', function(e) { 
                e.preventDefault();
                $('#specifications').append($('#specification_group_template').html());
                groupCount++;
            });

            $('#specifications').on('click', '.add_specification_group_field', function(e) { 
                e.preventDefault();
                $(this).parents('div.specification_group').append($('#specification_group_field_template').html()).find('input:last');
            });                             
        });
    })(jQuery)
</script>

Everything is fine right now, but I would like to modify this code so whenever I add a new group, the input names should be modified based on the groupCount variable value.

So if the user clicks "Add group", the appended HTML should be:

<div class="specification_group" style="margin-bottom: 20px;">
    <div class="label">
        Specification group     
    </div>
    <input name="specification_group_title2[]" type="text" class="short" placeholder="Group title" value="">
    <a href="#" class="add_specification_group_field"><i class="fa fa-plus-circle"></i> Add field</a><br />             
    <input name="specification_name2[]" type="text" class="short" placeholder="Name"> 
    <input name="specification_value2[]" type="text" class="short" placeholder="Value"> 
</div>

Also, when a user decides to add new fields to an existing group, the inputs should be renamed and the group index value should be added.

Martina · Accepted Answer · 2017-04-14 21:43:58Z

2

Just replace the values before adding the html:

$('.add_specification_group').on('click', function(e) { 
                        e.preventDefault();
                       var html = $('#specification_group_template').html();
                       html = html.replace('specification_name[]', 'specification_name' + groupCount + '[]');
                       html = html.replace('specification_value[]', 'specification_value' + groupCount + '[]');
                       $('#specifications').append(html);
                        groupCount++;
                    });

You can save the group number in a data attribute on the group main div, just add it to the replace:

$('.add_specification_group').on('click', function(e) { 
                            e.preventDefault();
                           var html = $('#specification_group_template').html();
                           html = html.replace('specification_name[]', 'specification_name' + groupCount + '[]');
                           html = html.replace('specification_value[]', 'specification_value' + groupCount + '[]');
                           html = html.replace('div class="specification_group"', 'div data-group-no="' + groupCount + '" class="specification_group"');
                           $('#specifications').append(html);
                            groupCount++;
                        });

Then retrieve it and replace when adding new fields:

$('#specifications').on('click', '.add_specification_group_field', function(e) { 
                e.preventDefault();
  var parent = $(this).parents('div.specification_group');
  var groupNo = parent.attr('data-group-no');
  var html = $('#specification_group_field_template').html();
  html = html.replace('specification_name[]', 'specification_name' + groupNo + '[]');
                           html = html.replace('specification_value[]', 'specification_value' + groupNo + '[]');

parent.append(html).find('input:last');
            });

edited Apr 14, 2017 at 21:43

answered Apr 14, 2017 at 15:24

Martina

7694 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cosmin Over a year ago

Great! So simple!

Cosmin Over a year ago

There is one problem though. When the user adds new fields in an existing group, the inputs need to be renamed based on the number of that group.

Martina Over a year ago

I added some ideas on how to check an existing group number, see if that helps.

Collectives™ on Stack Overflow

Dynamically change input names when appending to an existing div

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related