How to change input name in relation to its parent div index number

Question

I have a multiple form inputs and they use arrays in their name. The form can be duplicated by the user. When the form is duplicated name of the input field changes accordingly. Basically this is what I have in my form

<div class="machine-stations">
    <div class="property-container">
      <input name="machine[process][0][system][100][station][52][name]" />
      <input name="machine[process][0][system][100][station][52][price]" />
      <!-- more input fields -->
    </div>
</div>
<div class="machine-stations">
    <div class="property-container">
      <input name="machine[process][1][system][100][station][60][name]" />
      <input name="machine[process][1][system][100][station][52][price]" />
      <!-- more input fields -->
    </div>
</div>
<div class="machine-stations">
    <div class="property-container">
       <input name="machine[process][2][system][100][station][40][name]" />
       <input name="machine[process][2][system][100][station][52][price]" />
       <!-- more input fields -->
    </div>
</div>

What I am trying to accomplish is that I have to change the the number after [process] based on the .machine-stations index number. User can duplicate .machine-stations. If input field is contained in .machine-stations index 0 then the number after [process] should be 0 and so on. Thanks!

Smern · Accepted Answer · 2013-05-30 03:42:14Z

2

I believe this is what you are looking for: http://jsfiddle.net/GQbCV/1/

var $inputs = $(".machine-stations").find("input");
$inputs.each( function(i) {
    this.name = this.name.replace(/\[process\]\[\d+\]/,"[process]["+i+"]");
});

In the fiddle I changed the numbers in the html so that they could be changed back to 0,1,2.

Since you said the above isn't what you are looking for and haven't clarified, I'll guess again... using your updated html structure. This will restart the index to 0 within each .machine-stations : http://jsfiddle.net/GQbCV/2/

$(".machine-stations").each( function() {
    $(this).find("input").each( function(i) {
        this.name = this.name.replace(/\[process\]\[\d+\]/,"[process]["+i+"]");
    });
});

and a third guess... in this case everything within the first .machine-stations will have 0, everything within the second will have 1, etc. http://jsfiddle.net/GQbCV/3/

$(".machine-stations").each( function(i) {
    $(this).find("input").each( function() {
        this.name = this.name.replace(/\[process\]\[\d+\]/,"[process]["+i+"]");
    });
});

edited May 30, 2013 at 3:42

answered May 30, 2013 at 2:04

Smern

19.1k22 gold badges77 silver badges93 bronze badges

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

3 Comments

u54r Over a year ago

Appreciate for the time, but this is not what I am looking for.

RobG Over a year ago

That could be this.name = this.name.replace(...) and you have saved creating 2 unnecessary jQuery objects and two method calls on each iteration.

Smern Over a year ago

@u54r, then what exactly are you looking for? perhaps you should explain what you want to happen and what you want the outcome to be.

wirey00 · Accepted Answer · 2013-05-30 02:22:53Z

0

You can simply do it using the attr('attributeName',function(index,oldvalue) method

$('.machine-stations input').attr('name',function(i,v){
    return v.replace(/process\]\[\d+/,'process]['+i);
    // or return v.replace(/(process\]\[)\d+/,'$1'+i);
});

FIDDLE

edited May 30, 2013 at 2:22

answered May 30, 2013 at 2:17

wirey00

33.7k7 gold badges56 silver badges65 bronze badges

Comments

Lewis E. · Accepted Answer · 2013-05-30 02:58:37Z

0

1st jsFiddle

The code started simple and the small function grew lol i didn't acknowledge the question edit til after but check the fiddle. I believe this is the direction somewhat your going in.

answered May 30, 2013 at 2:58

Lewis E.

3371 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to change input name in relation to its parent div index number

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related