Jquery dynamic rows in form

Question

When we click on the link "Add new row", it need to duplicate whole <div class="row"> and change <input> attribute name to data[+1][xxx]
(Number in [] must +1 everytime)

Code: http://jsfiddle.net/c6WG8/

<div class="row">                                  
      <div class="inner">   
        <div>
            <label for="layout_name">Link</label>
            <input id="layout_name" name="data[0][link]" type="text" value="">
        </div>
        <div>
            <label for="layout_name">Text</label>
            <input id="layout_name" name="data[0][text]" type="text" value="">
        </div>
     </div>   
</div>
<a href="#" class="add_row">Add new row</a>

First part looks ok, but changing name of input has probably some bug.

Did you try something or are you just asking us to code it for you ? — Denys Séguret
– Denys Séguret, Commented Jun 3, 2014 at 18:06
Sure, here is it: jsfiddle.net/c6WG8 - first part looks ok (duplicate DIV), but as you can see problem is with rename input name attribute. Do you have idea what's wrong? — Jiří Valoušek
– Jiří Valoušek, Commented Jun 3, 2014 at 18:27
add the fiddle code and link to your question so the effort is shown within the question...many people won't look through the comments — charlietfl
– charlietfl, Commented Jun 3, 2014 at 18:28

PhoenixWing156 · Accepted Answer · 2014-06-03 19:39:04Z

1

In your jQuery fiddle code on line 9, instead of doing

content.attr("id",function(i,oldVal) {

you should do

content.attr("name",function(i,oldVal) {

since you want to update the name of the input fields and not the id. Also, there was a small typo in your code. You initialized the content variable on line 8 with a dollar sign; you should instead do it like this:

var content = $(this).closest('.row').find( "input");

An updated fiddle is here: http://jsfiddle.net/c6WG8/8/

answered Jun 3, 2014 at 19:39

PhoenixWing156

3921 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

Jquery dynamic rows in form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related