0

Example: let's say we have a form with 3 fields: pc, part_id, part_details. Sometimes you will want to add additional parts to database when adding pc, so part_id and part_details should be duplicated(part_id and part_details should be corresponding). What I want is the best way to append this two fields to the form?

I know if you just want to duplicate one field you can name the field like this:

<input type="text" name="part_id[]">

Then we can easily get the post data as array. But now we are duplicating more than one field, if we use the approach above at the post end the two/multiple arrays will not be relevant. The approach described here seems to be a good one http://www.quirksmode.org/dom/domform.html, but the fact that names are changing all the time makes it complicated to use the post data as well.

There is another possible approach described here Multiple Forms With Input Fields With The Same Name Attribute? Good Or Bad? . It gives an idea to duplicate the entire form. I am not sure if I understand it correctly, but when I try putting two identical forms in the same page and submit one of them, only data from this form will be submitted, the other one will be ignored. Also it is not suitable for my scenario as not all the fields should be duplicated.

So what is the best way to accomplish this duplicating job?

Community
  • 1
  • 1
Andrew Liu
  • 2,478
  • 5
  • 22
  • 29

2 Answers2

1

You can use another level of indexing:

<input type="text" name="pc" />

<!-- First part -->
<input type="text" name="parts[0][part_id]" />
<input type="text" name="parts[0][part_details]" />

<!-- Duplicate part -->
<input type="text" name="parts[1][part_id]" />
<input type="text" name="parts[1][part_details]" />

<!-- Another duplicate part -->
<input type="text" name="parts[2][part_id]" />
<input type="text" name="parts[2][part_details]" />

The fields for each part (id and details) can be easily generated using jQuery.

Stefano Dalpiaz
  • 1,673
  • 10
  • 11
  • This seems to be a good idea, I will come back after testing, thanks – Andrew Liu May 08 '14 at 01:26
  • After actually work on it, I found the answer by sahbeewah saves much more time. This answer here makes it easy to manipulate the data in the next step, but its take's more time to generate this fields in the frontend by javascript. Anyway, upvote for this answer since it opens my eyes. – Andrew Liu May 12 '14 at 02:28
1

In the link you gave, they didn't duplicate the form, just the elements inside the form which is fine. If all you are adding is multiple parts to a single PC then there shouldn't be a problem. The parts will be linked via array indices (you can rely on the ordering).

The first instance of part_id[] will correspond to the first instance of part_details[]. This should be distinguishable in your server-side language. In PHP for instance, part_details[2] will correspond to part_id[2] etc.

sahbeewah
  • 2,690
  • 1
  • 12
  • 18
  • This should be a viable approach, but I still don't get what they were trying to do. I am just looking for a more ideal way with less worry about the server side data manipulation – Andrew Liu May 08 '14 at 01:33
  • Uh, it is not going to get any cleaner than that. The next (wasteful) step up would be to generate a custom JSON object upon submission and submit the JSON as the data instead. – sahbeewah May 08 '14 at 01:38
  • You were right, your approach is better, it saves time in javascript to duplicate the fields. – Andrew Liu May 12 '14 at 02:30