Modifying a form with a button that adds fields

[eluser]Apocryphon[/eluser]
Hey, I was wondering if this feature is included within the Form library, or if it depends on an additional plugin (AJAX, perhaps?):

Currently I have a form with fields called Teams. Each Team field is supposed to be connected to a subfield called Leader. My idea is is that someone can fill in both Team and Leader, and if they wanted to add more teams, they can click on a button that will generate a Team field and a Leader field below that. Furthermore, the Team/Leader fields are not the last fields on the page- I need to account that there are fields below too, that I don't want to be wiped out when I click on the button.

I was wondering how this would be achieved in CI. I would also appreciate it for any tips on how to store the Team/Leader pairs in the MySQL db.

Thanks!

[eluser]Atharva[/eluser]
You need to use javascript for this. I suggest you look at jQuery append method here

[eluser]Apocryphon[/eluser]
Cool, thanks! However, any ideas as to how to deal with paired values such as Team-Leader? Maybe I should just set it so that both fields are read to create the a single row's worth of data. However, which MySQL ColumnType would be able to handle such a pair?

[eluser]Apocryphon[/eluser]
Okay, lemme rephrase my question. Say my form looks like this:

valueA ______
valueB ______
Team ______ +
|_Leader ______

The idea is, when you press on the + button, this occurs-

valueA ______
valueB ______
Team ______
|_Leader ______
Team ______ +
|_Leader ______

As such, you would be able to add more Teams. The jQuery append method seems quite helpful. However, does anyone have any idea how I would represent the Team/Leader pairs on the backend, in the MySQL database? Furthermore, how would I deal with multiple pairs? What datatype can handle that?

[eluser]stuffradio[/eluser]
You do it the way Atharva said.

I don't know what valueA and valueB are, but if you're just doing Team <input box> Team leader <input box> then to add more, just create an array for them.

Code:

Team <input type="text" name="teamname[]" />
Team leader <input type="text" name="team_leader[]" />

Now append those fields with jQuery when you want to add more, and loop through the array to add them to the database.

[eluser]Apocryphon[/eluser]
Any suggestions as to how I should store them in the database? Bear in mind that I would have multiple Team/Leader pairs.