I believe you could put the code for one item – <fieldset>…</fieldset> – into a seperate file and use an AJAX request to insert it into the form the appropriate number of times. eg. $.get("fieldset.html", addFieldsetToForm);

By making the above file PHP and specifying a number in the query string you can have it change all the ids to the correct number. eg. $.get("fieldset.php", { "id" : 2 }, addFieldSetToForm); // fieldset.php?id=2

It would be a lot easier if you used arrays instead of jewellry1, jewellry2, jewellry3, etc for the names. To process this in php you would need to manually code every one of those variables. If you use name="jewellry[]" you will receive an ordinal array which contains each of the fields.

Final suggestion. Why not have the fields for one item present in the html then have an "Add Another Item" button. I believe this would be easier for users and have the added bonus of working for users with javascript disabled – they can still submit one item.

Tips

Categories

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.