List management

Adding and removing items in a list within a form.

Forms often contain lists. For instance an order form that contains a list of order lines. A family registration form that contains a list of children. Or an email form that contains a list of attachments. Through the form the user can manage the list (add/remove items) before saving the form.

In the following example, the form shows a task list. The list can have a name. And has items (tasks). The list of items consists of a paragraph (P tag) per item, as well as a paragraph to add a new item. Each existing item has a submit button with a formaction to remove the item from the list. The new item paragraph has a button with a formaction to add an item to the list. The whole list is embedded in a DIV element with a target class. As a result, when the Add or Remove buttons are pressed (which are inside the target DIV), the whole form is posted to the server. But the server is expected to return only an update for the list, not the whole form:

<form action="/Tasklist/Save" method="post" onkeyenter-click="">

<p>
  <label>List name:</label><br :>
  <input type="text" name="listname" />
</p>

<div class="target">
  <div class="overlay" hidden />
  <p>
    <input type="hidden" name="Tasks[0]" value="Respond to emails" />
	<button type="submit" formaction="/Tasklist/Remove?index=0">&times;</button>
	Respond to emails
  </p>
  <p>
    <input type="hidden" name="Tasks[1]" value="Make mock-up for site" />
	<button type="submit" formaction="/Tasklist/Remove?index=1">&times;</button>
	Make mock-up for site
  </p>
  <p onkeyenter-click=">[type='submit']">
    <input type="text" name="newTask" required />
    <button type="submit" formaction="/Tasklist/Add">Add</button>
  </p>
</div>

<button type="submit">Save</button>

</form>

So when the user presses the Add button after having entered a value to add, the whole form is posted to the server, but the server should only return new content for the list, such as:

  <div class="overlay" hidden />
  <p>
    <input type="hidden" name="Tasks[0]" value="Respond to emails" />
	<button type="submit" formaction="/Tasklist/Remove?index=0">&times;</button>
	Respond to emails
  </p>
  <p>
    <input type="hidden" name="Tasks[1]" value="Make mock-up for site" />
	<button type="submit" formaction="/Tasklist/Remove?index=1">&times;</button>
	Make mock-up for site
  </p>
  <p>
    <input type="hidden" name="Tasks[2]" value="My new task" />
	<button type="submit" formaction="/Tasklist/Remove?index=2">&times;</button>
	My new task
  </p>
  <p onkeyenter-click=">[type='submit']">
    <input type="text" name="newTask" required />
    <button type="submit" formaction="/Tasklist/Add">Add</button>
  </p>

When submitting a form, Sircl searches for the target by starting from the trigger of the form submission (the button used to submit the form), up the structure of the HTML document until an element is found with a target attribute or class.

Therefore, when submitting the form using the Add or Remove buttons, only the list part of the form is to be updated by the server. And since only a part of the page is updated and no full page reload is required, the user experiences adding and removing items to the list as a smooth action.

While when the Save button is pressed, the whole page is replaced which results in a full page reload (unless an inline target is defined for the whole form as well, or Sircl is used in Single-Page mode).

If the user presses the Enter key when the new task textbox has the focus, most browsers will submit the form using the first submit button found, which will be the first remove button. This is not what we want. The onkeyenter-click attribute on the form will override the default behaviour of pressing the Enter key and solve this problem.