«form» Component Type

📖 Table of Contents

Introduction
Options
Actions
- Action «empty»
Other Methods
Events

Introduction

In SmarkForm the whole form is a field of the type form which imports and exports JSON data.

👉 The keys of that JSON data correspond to the names of the fields in the form.

👉 From fields can be created over any HTML tag except for actual HTML form elements (<input>, <textarea>, <select>, <button>…) and can contain any number of SmarkForm fields, including nested forms.

Example:

Following example shows a simple SmarkForm form with two nested forms:

🗒️ HTML

⚙️ JS

👁️ Preview

📝 Notes

<div id='myForm'>
<p>
    <label for='id'>Id:</label>
    <input data-smark type='text' name='id' />
</p>
<hr />
<p><b>Personal Data:</b></p>
<div data-smark='{"type":"form","name":"personalData"}'>
    <p>
        <label for='name'>Name:</label>
        <input data-smark type='text' name='name' placheolder='Family name'/>
    </p>
    <p>
        <label for='surname'>Surname:</label>
        <input data-smark type='text' name='surname' />
    </p>
    <p>
        <label for='address'>Address:</label>
        <input data-smark type='text' name='address' />
    </p>
</div>
<hr />
<p><b>Business Data:</b></p>
<div data-smark='{"type":"form","name":"businessData"}'>
    <p>
        <label for='name'>Company Name:</label>
        <input data-smark type='text' name='name' placheolder='Company Name'/>
    </p>
    <p>
        <label for='address'>Address:</label>
        <input data-smark type='text' name='address' />
    </p>
</div>
<hr />
<button data-smark='{"action": "import"}'>Edit JSON</button>
<button data-smark='{"action": "empty"}'>Clear Data</button>
<button data-smark='{"action": "export"}'>Show JSON</button>
</div>

const myForm = new SmarkForm(document.getElementById("myForm"));
/* Export action: */
myForm.on("AfterAction_export", function ({data}) {
    window.alert (JSON.stringify(data, null, 4));
});
/*Import action: */ 
myForm.on("BeforeAction_import", async function (ev) {
    const prevData = JSON.stringify(await myForm.export());
    const newData = window.prompt("Data to import", prevData);
    try {
        ev.data = JSON.parse(newData);
    } catch (err) {
        ev.preventDefault();
        window.alert("Invalid data!");
    };
});

Id:

Personal Data:

Name:

Surname:

Address:

Business Data:

Company Name:

Address:

👉 Play* with Edit JSON, Clear Data and Show JSON butons.

👉 Check JS tab to see how easy is capturing or injecting data from/to the form (or any inner form field).

👉 The outer form doesn’t need the “data-smark” attribute having it is the the one we passed to the SmarkForm constructor.

👉 Notice that the empty action just works out of the box.

ℹ️ In text fields the “name” attribute is naturally taken as field name.

ℹ️ In the case of nested form, having <div> tags cannot have a “name” attribute, it is provided as a data-smark object property (which is always valid).

🚀 This is a simple showcase form. You can extend it with any valid SmarkForm field.

Options

Actions

Action «empty»

Other Methods

Events

«list» Component Type

⏩