Incrementing Dynamic HTML Element Attributes

Posted: October 19, 2010 in JavaScript

On occasion I clone DOM elements to repeat form sections dynamically. During this I need to increment the name and id attributes so I can reference them later on.

For example: name=”txtField1″ becomes “txtField2”

To make this happen I use a little but of slick jQuery magic. This increments the id and name attributes and empties the value for input, select, and textarea elements.

var newNum = new Number(num + 1);
var newElem = $('.clonedInput:last').clone(false).attr('id', 'input' + newNum);
newElem.find('input,select,textarea')
    .attr('name', function() {
        return $(this).attr('name').replace(/^(.+?)(\d+)$/, function(s, p1) {
            return p1 + newNum;
        });
    })
    .attr('id', function() {
        return $(this).attr('id').replace(/^(.+?)(\d+)$/, function(s, p1) {
            return p1 + newNum;
        });
    })
    .val('');

I started out using the regex:

^(.+)(\d+)$

But that failed after 10. The .+ expression needs to be non-greedy using:

^(.+?)(\d+)$

Here’s another example using a table and an button to create a new row:

$("#productChildren").delegate("#btnAddAdditionalProductChildren", "click", function(event) {
	var $clone = $("#productChildren > tr").last().clone(false);
	$(this).remove();
	var $inputs = $( $clone ).find("input[type='text']");
	$($inputs).each(function() {
		var newNameAttr = $(this).attr('name').replace(/\d+$/, function(match, p1) {
			return parseInt(match) + 1;
		});	
		$(this).attr('name', newNameAttr);
		$(this).val('');	
	});
	$($clone).appendTo("#productChildren");
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s