How can I replace a standard textarea with "insertable" text fields?

Question

Hi all, I'd like to be able to replace a standard HTML <TEXTAREA> input with insertable <INPUT> text inputs. By insertable, I mean having two TEXT form inputs (name, role) and an "Add" button after it to add a new name/role after this one if desired.

Ideally I'd have 'role' in an HTML <SELECT> input (drawn from my database) but I'm not really asking about that now :)

Also (again ideally) I'd like to be able to read these value in and parse them to look the same as when they were entered, i.e. with the text fields and pulldowns.

My database stores all of this in a single MySql 'text' which right now I have to enter manually in the format :

name - role ; name2 - role2 ; name3 - role3 

and my script (that creates XML from this) explodes the "name" into two nodes explode'd by a "space-dash-space" and separates each node when it reads a semicolon.

Edited to show that my main problem is how to replace the plain HTML <textarea> with one or more <INPUT> fields and serialize them so they can be stored in my MySQL text record.

Answer 1

You can save the data as serialized php or JSON encoded string. That way, you can keep the object structure in the TEXT field.

Hope that helps.

Answer 2

Here was my solution: to use jQuery's replaceWith, replacing the TEXTAREA's tag with a bunch of <INPUT TYPE=TEXT name=myVar[]> so that they were stored in an array, and implode/explode the values as I needed them.