All Downloads are FREE. Search and download functionalities are using the official Maven repository.

templates.demos.htmlForms.dynamic.html Maven / Gradle / Ivy

There is a newer version: 2.2.0
Show newest version
{% extends "../htmlForms.html" %}

{% block demoSectionClasses %}demo_html_forms_single{% endblock %}
{% block meta_title %}Demos - HTML Forms - Dynamic Fields{% endblock %}
{% block meta_description %}Dynamic Fields HTML Forms with validation demo{% endblock %}

{% set demoId = "dynamic" %}

{% block scripts %}

{#==========================================
We use Handlebars as a client-side 
templating engine to generate new elements.
==========================================#}



{#==========================================
Transforms the Pebble "User" template to a
Handlebars template so it can be used to
dynamically add a new User using javascript.
==========================================#}


{#==========================================
New tag template
==========================================#}
{% verbatim %}

{% endverbatim %}

{% endblock %}

{% block demoBody %}

Dynamic Fields

Please note :

It is important to know that this demo is not a SPA and doesn't use any data management javascript library. There is no "store" as the source of the dynamic elements.

This demo shows how the form model can be manipulated freely on the client side simply using the "name" attributes on a traditional HTML form. It is fully working even when javascript is disabled.

We're going to provide a true SPA demo in a near future.

Add tags and new users and submit the form to see the validations in action! All existing field are required and have a minimum length. Also, tags must all be different in a given User section.

{% if validation['demoForm._'] | validationSubmitted()%} {% if validation['demoForm._'] | validationHasErrors() %} {% set alertClass = "alert-danger" %} {% set status = "Some users are invalid" %} {% elseif validation['demoForm._'] | validationHasWarnings() %} {% set alertClass = "alert-warning" %} {% set status = "Some users contains warnings" %} {% elseif validation['demoForm._'] | validationIsValid() %} {% set alertClass = "alert-success" %} {% set status = "All users are valid!" %} {% endif %}
{{status}}
{% endif %} {% for user in demoForm.users | default([]) %} {% set userPath = "demoForm.users[" + loop.index + "]" %} {% include "./dynamic/userFragment.html" with {"position" : loop.index, "positionInc" : loop.index + 1} %} {% endfor %}

Code

How to

The explanation of this demo will be quite short. We encourage you to look at the source to see how it actually works!

Basically, this demo shows how the fields of a traditional HTML form can be manipulate to change the underlying form model. Spincast uses the "name" attributes of the fields of a form to dynamically build a JsonObject representing this form.

When a form is submitted, we get a JsonObject which represents it :

Form form = context.request().getFormOrCreate("demoForm");
context.response().addForm(form);

The structure of this form (which is also a JsonObject under the hood!) depends on the names of the submitted fields. If you add or remove some fields client-side, the form object will reflect those modifications. This allows great flexibility when using traditional HTML forms (vs. SPA or using data management javascript libraries) since the model can be dynamically changed, client-side.

Also, by adding back that dynamic JsonObject to the response model, you can re-render the form and all the fields are kept, as they were submitted.

More info

Make sure you also try the first demo of this section, Introduction - Single field which introduces forms and validation using Spincast.

Otherwise, you can learn everything about forms and validation in the dedicated Forms section of the documentation.

{% endblock %}




© 2015 - 2024 Weber Informatics LLC | Privacy Policy