Repeat input tag with new name using jquery

Question

I'm having a problem in jquery, I have a form with multiple div that have multiple inputs and repeats themself when i click on add button, the problem is the inputs that repeats have names in format <input name="brand_meta[designer][1][name]" type="text" class="form-control" value="">

when I press on add button I want them to repeat itself with new name brand_meta[designer][2][name]

my fiddle is here http://jsfiddle.net/prayaspanchuri/b2wskq1w/

Thanks

Why would you want to name your fields that way? There is an easier way to name fields whose data you want to send in an array or serialize: name="brand_meta[]". Otherwise, you will have to use REGEX to update the count yourself. — Terry
– Terry, Commented Aug 25, 2014 at 19:48
Why don't you use band_meta[designer][]? Most server languages will automatically convert these into an array. — Barmar
– Barmar, Commented Aug 25, 2014 at 19:48
Actully these are going to be added to wordpress post meta, and to fecht them in more descriptive way, I'm saving it this way, you can see the example here link — prayas
– prayas, Commented Aug 25, 2014 at 19:51

PeterKA · Accepted Answer · 2014-08-25 20:20:04Z

1

DEMO

$(document).ready(function(){
    $('.btn.btn-default.btn-sm').bind('click',function(){
        var id = $(this).attr('id');
        var n = +$('.'+id).length + 1;
        var html = $('.'+id).html()
        .replace(/\[\d+\]/g, '[' + n + ']');
        $( '.'+id+':last' ).after( $( '<div class="col-md-12"><hr style="border-top:1px #000 solid"></div><div class="'+id+'">'+html+'</div>' ) ).fadeIn('slow');
    });
});

answered Aug 25, 2014 at 20:20

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

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

1 Comment

PeterKA Over a year ago

Great! Glad this helped. Enjoy, and checkmark the answer when you get a chance.

Sam Battat · Accepted Answer · 2014-08-25 20:12:56Z

1

    $( '.'+id+':last' ).find('input').each(function(){
        var elemName = $(this).attr("name");
        var oldNameNum = parseInt(elemName.match(/\[(\d+)\]/)[1], 10);
        var newName = $(this).attr("name").replace(/\[(\d+)\]/, "["+(oldNameNum+1)+"]");
        $(this).attr("name", newName);
    });

DEMO: http://jsfiddle.net/b2wskq1w/2/

answered Aug 25, 2014 at 20:12

Sam Battat

5,7651 gold badge22 silver badges29 bronze badges

Comments

RN Kushwaha · Accepted Answer · 2014-08-25 20:21:00Z

0

Why do you want different names? You can use names arrray like city[] which will have all input data. But if you want different name you can use an hidden input to track the name of next fields like this

 <input type='hidden' name='counter' id='counter' value='1'>

and when duplicating inputs increase its value by 1 and assign its value to input name

like this

 $("#addbtn").click(function(e){
   var countertrack= $("#counter").val();
   var newname= parseInt(countertrack+1);
   /* then assign the name using this variable*/

 })

edited Aug 25, 2014 at 20:21

answered Aug 25, 2014 at 19:56

RN Kushwaha

2,1343 gold badges30 silver badges41 bronze badges

Collectives™ on Stack Overflow

Repeat input tag with new name using jquery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related