Adding an input name upon creation of new table row [jQuery]

Question

I have an order form I had put together for a client, you can view it here.

As you can see it creates a new row with 5 input fields (per row). Here's my problem, I have this form outputting the form in html format to the clients email for office use. I need to add a "unique name" for each input in the newly created row in order to pass that to the processing and out to the email.

Here is the JS file for adding rows

I know this has to be triggered by the $addRowBtn but I have been at this for awhile now and everything I have tried has just broken the form.

I've tried this example but to no avail:

thisRow.find("input.ClassName").attr("name","newName" + num);
num++;

I will buy the first person that helps with this a cup of coffee or something! It's bugging the ever living crap out of me!!

Answer 1

in your javascript you are setting thisRow as follows

thisRow = $(this).parents("tr");

but it should be

thisRow = $(this).parents("tr").eq(0);

then you can do

thisRow.find("input").each(function(i) {
 $(this).attr("name", "newName" + i);
});

Also check what this returns alert(thisRow.find("input").length); it should return 5 since you have 5 input elements in the row. I hope it works.

Answer 2

Just looking at this, I can see that this is being attached to the "remove row" function. Shouldn't this be fired off on the "add row" function. I'll give it whirl and see what happens.

Also, because each row has a unique identifier (orderType, sample, pattern, etc.), each input gets incremented when a new row is created, can I just assign each one with a starting value like this:

input class="order_type" name="orderType[i]" type="text"

And couldn't I just set up an array for each of the five inputs and loop it through until it hits the "max rows" which is 6?

I just don't know how to push that value "i" off to the newly created inputs on each row.