I've got a web application, consisting mainly of a big form with information.
The form is split into multiple tabs, to make it more readable for
the user:
<form>
<div id="tabs">
<ul>
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
</ul>
<div id="tab1">A big table with a lot of input rows</div>
<div id="tab2">A big table with a lot of input rows</div>
</div>
</form>
The form is dynamically extended (extra rows are added to
the tables).
Every 10 seconds
the form is serialized and synchronized with
the server.
I now want to add an interactive form on one of
the tabs: when a user enters a name
in a field, this information is sent to
the server and an id associated with that name is returned. This id is used as an identifier for some dynamically added form fields.
A quick sketchup of such a page would look like this:
<form action="bigform.php">
<div id="tabs">
<ul>
<li><a href="#tab1">Tab1</a></li>
<li><a href="#tab2">Tab2</a></li>
</ul>
<div id="tab1">A big table with a lot of input rows</div>
<div id="tab2">
<div class="associatedinfo">
<p>Information for Joe</p>
<ul>
<li><input name="associated[26][]" /></li>
<li><input name="associated[26][]" /></li>
</ul>
</div>
<div class="associatedinfo">
<p>Information for Jill</p>
<ul>
<li><input name="associated[12][]" /></li>
<li><input name="associated[12][]" /></li>
</ul>
</div>
<div id="newperson">
<form action="newform.php">
<p>Add another person:</p>
<input name="extra" /><input type="submit" value="Add" />
</form>
</div>
</div>
</div>
</form>
The above will not work: nested forms are not allowed
in HTML. However, I really need to display
the form on that tab: it's part of
the functionality of that page. I also want
the behaviour of a separate form: when
the user hits return
in the form field,
the "Add" submit button is pressed and a submit action is triggered on
the partial form.
What is
the best way to solve this problem?
