CODEWITHSUNDEEP
jquery
Sameer
Sameer

Reputation: 435

JQuery to Reset all the indexes after dynamically add or remove rows

I am dynamically adding or removing div elements. My sample html would look like:

<!-- 1st dynamic block -->
<div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
        </tr>
    </tbody>
</table>
</div>
<!-- 2nd dynamic block -->
<div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
        </tr>
    </tbody>
</table>
</div>

Here, I have added 2nd dynamic block using jquery clone. Now on click of 'Next' button I need to reset the name attribute index before submitting the page. So, for 1st and 2nd block name attributes will become name="details[0].lan" name="details[1].lan"

Please provide some solution how to do this in JQuery.

Upvotes: 1

Views: 6408

Answers (4)

jeugen
jeugen

Reputation: 342

I added two new rows, and a button 'ADD', plus deleting the row (I just copied your html)

<!-- 1st dynamic block -->
<div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
                <td class="remove">X</td>
        </tr>
    </tbody>
</table>
</div>
<!-- 2nd dynamic block -->
<div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
                 <td class="remove">X</td>
        </tr>
    </tbody>
</table>
</div>
    <div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
                 <td class="remove">X</td>
        </tr>
    </tbody>
</table>
</div>
        <div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
                 <td class="remove">X</td>
        </tr>
    </tbody>
</table>
</div>
    <input type="button" id="add" name="add" value="ADD">

After adding, and deleting the function resets the row, so before the submit you will send reseted/newly ordered values

var input = $('.dynamic-wrap input').attr('name','details');

    function resetTheOrder(){
    $.each(input,function(index,value){
        $(value).attr('name','details['+index+'].lan').prop('id','lan-'+index+'');
     });
    }

$('#add').on('click',function(){
// after adding new row
    resetTheOrder();
});

$('.remove').on('click',function(){
// after deleting new row
    resetTheOrder();
});

Upvotes: 1

dklingman
dklingman

Reputation: 236

If you are just looking to re-sync the names just do the following. Keep in mind you should re-sync the id's as well as id's should be unique. 

$('div table :text').each(function(i) {
    $(this).attr({
        'id': 'lan-' + (i+1).toString(),
        'name': 'details[' + i + '].lan'
    });
});

Updated Code

This will allow you to update everything regardless of the names.

$('div table :text').each(function(i) {
    var id = $(this).attr('id');
    var name = $(this).attr('name');

    id = id.replace(/-\d+/g, '-' + (i+1));
    name = name.replace(/\[\d+\]/g, '[' + i + ']');
    $(this).attr({
        'id': id,
        'name': name
    });
});

http://jsfiddle.net/dklingman/baURf/

Upvotes: 1

jeugen
jeugen

Reputation: 342

After cloning you should try this

var input = $('.dynamic-wrap input').attr('name','details');
$.each(input,function(index,value){
    $(value).attr('name','details['+index+'].lan').prop('id','lan-'+index+'');
});

Update:

    var input = $('.dynamic-wrap input').attr('name','details');

    function resetTheOrder(){
    $.each(input,function(index,value){
        $(value).attr('name','details['+index+'].lan').prop('id','lan-'+index+'');
     });
    }

Call resetTheOrder() function after adding some new div, or deleting this will recount the order..

Upvotes: 0

Batu.Khan
Batu.Khan

Reputation: 3065

You can do something like this after cloning and adding the table

var last_tbl = $(".table-condensed:last");
var last_index = $(".table-condensed").length;
last_tbl.find("input").attr("id","lan-" + last_index).attr("name","details["+ (last_index - 1) +"].lan");

Upvotes: 0

Related Questions