I am creating a registration form. The form allows multiple (in theory, unlimited) registrants. So there is an "Add attendee" button, and clicking that button should create an additional copy of the different registration information (name, age, etc.)
I figured out how to dynamically add information to the page, based on
http://www.web-design-talk.co.uk/58/adding-unlimited-form-fields-with-jquery-mysql/
My problem is that the example on that page is just adding one text box. I have 7 fields, all with labels and various formatting information. So I didn't want to put all of that HTML code inside the main page - I wanted to abstract it into its own page and just include / call it.
My first attempt was with PHP, so I separated out the common code into its own PHP include file, and included it. That worked fine, except that I had no way to identify the ids / names of the fields - because the PHP of course is server-side, there was no way to pass in an incrementing counter to the included PHP file to output in the form names (first_name_1, first_name_2, etc.)
So then I thought I could do it in JavaScript, but now I'm trying to determine the best way to output ~30 lines of HTML code in this Javascript function. A ton of document.write or
string concatenation doesn't seem the most elegant solutions.
So at this point I'm kind of stuck - anyone have any thoughts?