Question

I have a html page where i have a few textfields. Each set of textfields belongs inside a DIV. I want to change the name of certain textfields. But perhaps this gets more clear when you take a look at the example html:

http://jsfiddle.net/dg2Bz/

As you can see the first div has 3 text elements with this as name:

test[something][xxxx]

But the other “dummy” divs have textfields with a number:

<input name="test[100][name]" value="display" />
<input name="test[100][option1]" value="op1" />
<input name="test[100][option2]" value="op2" />

and

<input name="test[101][name]" value="borders" />
<input name="test[101][option1]" value="op1" />
<input name="test[101][option2]" value="op2" />

---

These fields all belong in a div. What i want to do is change the number part of the name and replace that with the value of the first textfield which has “name” in the “name” attribute. So that it becomes this:

<input name="test[display][name]" value="display" />
<input name="test[display][option1]" value="op1" />
<input name="test[display][option2]" value="op2" />

and

<input name="test[borders][name]" value="borders" />
<input name="test[borders][option1]" value="op1" />
<input name="test[borders][option2]" value="op2" />

I’m not sure how i could actually do this with jQuery. I’m sure it’s possible somehow and it probably involves some regex. Just can’t get my head around it…

Answer 1

This is one possible solution:

$(".dummy :input[name^=test]")​​​​​​​​​​​​​.attr("name", ​​function(i, value) {
    var name = $(this).parent().children(":first").val();
    return value.replace(/\[\d{3}\]/, "[" + name + "]");
});​

DEMO: http://jsfiddle.net/dg2Bz/1/