A single form

A simple form where you change and save data

To use this you have make your template load jquery, dataconnect and init the the autoform functionality as described here.

What you are doing here is to set up an area for the the form. This is done by creating a div with data-tablename where the parameter is the table to read data from. You can also set the form action done on load. Here we added first that means load first record that fits the query given. The default when not set is new record.

The next to do is to define all data that should be read from the table. The default functionality is to search for all input and use the id value as field values. For data to only be shown, you use any html tag and add the attribute data-live="fieldname".

Any element can be used for actions. You simply add data-action="theactionname" to the element and it will be connected to actions when data is done loading. Here we have used buttons, but any element that can take click events will do.

<div data-tablename="Address" data-formdataaction="first">
<h4>An address from the Address table</h4>
<p data-live="ID"></p>
<p><input id="Name" type="text" placeholder="Name"/></p>
<p><input id="Address1" type="text" placeholder="Address1" /></p>
<p><input id="Address2" type="text" placeholder="Address2"/></p>
<p><input id="PostAddress" type="text" placeholder="Post address" /> <input id="PostCode" type="text" placeholder="Post code" /></p>
<p><input id="EMail" type="text" placeholder="EMail" /></p>
<button data-action="RecordPrevious">Previous</button> <button data-action="RecordNext">Next</button> <button data-action="RecordSave">Save</button> <button data-action="FormClear">Clear</button>
</div>

Simple form with buttons for navigating and saving data