<form id="--form" action="" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="post" novalidate>
<fieldset data-toggle="--fw__step" class="fw__inputs o-divider --fw__step u-pl-none u-pr-none u-mb-medium">
-
<div class="u-text-center u-mb-large">
<h2 class="u-heading-03"></h2>
<p class="u-mb-large u-color-secondary"></p>
</div>
<h3></h3>
<ul>
<li>Stato: </li>
<li>Prezzo: €</li>
<li>Inizio: </li>
<li>Scadenza: </li>
</ul>
<div class="u-mb-base ">
<label class="u-label-04 u-color-base u-inline-block" for="">Metodo di pagamento</label>
<select class=" u-block u-size-full" name="select-name" id="select-id">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
</div>
<div class="u-mb-base ">
<span>Aggiungi metodo di pagamento</span>
</div>
<div class="u-mb-base ">
<label class="u-label-04 u-color-base u-inline-block" for="">Billink</label>
<select class=" u-block u-size-full" name="select-name" id="select-id">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
</div>
<div class="u-mt-large">
<div class="u-flex u-items-center">
<div class="u-size-full u-size-1-2 ">
<label class="c-btn c-btn--default u-label-03 u-cursor-pointer c-btn--large u-text-center" for="intro-form-radio">← Indietro</label>
</div>
<div class="u-size-full u-size-1-2 u-text-right">
<input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="submit" value="" />
</div>
</div>
</div>
<div id="results" class="u-mb-large u-mt-large"></div>
</fieldset>
</form>
<script>
window.onload = function() {
var stepIndex = 0;
}
// var modeToggle = document.getElementsByClassName("input:radio[name=c-tabs__choice]:checked");
// const stepElements = document.querySelector('[data-toggle-step]');
var stepElements = document.getElementsByClassName("mode-type-fw__step");
var form = document.getElementById("mode-type-form");
var breadcrumbsItems = document.getElementsByClassName("c-stepper__element");
// Initialise the form
function init() {
// Reset the step
stepIndex = 0;
// Clear all fields
form.reset();
toggleBreadcrumbsStep();
showCurrentStep();
breadcrumbsItems.classList.add("c-stepper__element--active");
}
// Indicate the current step with breadcrumbs
function toggleBreadcrumbsStep() {
Array.from(breadcrumbsItems).forEach(function(el, index) {
if (index <= stepIndex) {
el.classList.add("c-stepper__element--active");
} else {
el.classList.remove("c-stepper__element--active");
}
});
}
// Show the current step and hide the rest
function showCurrentStep() {
Array.from(stepElements).forEach(function(el, index) {
if (index !== stepIndex) {
el.classList.add("u-none");
} else {
el.classList.remove("u-none");
}
});
}
// Next step action, all fields in current step must be validated before proceed to next step.
function next() {
const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
// Increment step
stepIndex++;
toggleBreadcrumbsStep();
showCurrentStep();
}
// Back button action to navigate 1 step back
function back() {
// Clear all fields in current step
const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
Array.from(fields).forEach(function(field) {
const tagName = field.tagName;
if (tagName.localeCompare("INPUT") === 0) {
field.value = '';
} else if (tagName.localeCompare("SELECT") === 0) {
field.selectedIndex = 0;
}
});
// Decrement step
stepIndex--;
toggleBreadcrumbsStep();
showCurrentStep();
}
form.addEventListener('submit', function(e) {
e.preventDefault();
const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
// all fields in current step must be validated before submission.
// Prepare the result in next view
showResult();
// Navigate to result
stepIndex++;
// toggleBreadcrumbsStep();
showCurrentStep();
}, false);
function showResult() {
const resultsContainer = document.getElementById("results");
// Make sure the result page is empty
resultsContainer.innerHTML = "";
const fields = form.querySelectorAll("input:not([type=button]):not([type=submit]), select");
// List out all data
fields.forEach(field => {
const fieldLabel = field.getAttribute("data-label");
const fieldValue = field.value;
const resultItem = document.createElement("li");
resultItem.setAttribute("class", "fw__result__item");
resultItem.innerHTML = '<span class="fw__result__label">' + fieldLabel + ':</span> <strong class="fw__result__value">' + fieldValue + '</strong>';
resultsContainer.append(resultItem);
});
}
init();
</script>
{% set prevStepForLabel = 'intro-form-radio' %}
<form id="{{mode}}-{{type}}-form" action="" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="post" novalidate>
<fieldset data-toggle="{{mode}}-{{type}}-fw__step"
class="fw__inputs o-divider {{mode}}-{{type}}-fw__step u-pl-none u-pr-none u-mb-medium">
{{mode}}-{{type}}
<div class="u-text-center u-mb-large">
<h2 class="u-heading-03">{{ page_title }}</h2>
<p class="u-mb-large u-color-secondary">{{ page_subtitle }}{{mode}}</p>
</div>
<h3>{{ subription.editionName }}</h3>
<ul>
<li>Stato: {{subription.status}}</li>
<li>Prezzo: €{{subription.price}}</li>
<li>Inizio: {{subription.startDate}}</li>
<li>Scadenza: {{subription.expireDate}}</li>
</ul>
<div class="u-mb-base {% if error %}c-form-error{% endif %}">
{% render "@select", {label:'Metodo di pagamento', fieldLabel:'{{subription.billing}}', helper:false}, true %}
</div>
<div class="u-mb-base {% if error %}c-form-error{% endif %}">
<span>Aggiungi metodo di pagamento</span>
</div>
<div class="u-mb-base {% if error %}c-form-error{% endif %}">
{% render "@select", {label:'Billink', fieldLabel:'{{subription.billing}}', helper:false}, true %}
</div>
<div class="u-mt-large">
{% render "@stepcontrols", {
submitForm: 'TRUE',
actionLabel: actionLabel,
deleteLabel: deleteLabel,
prevStep: 'FALSE',
prevStepIndex: 'TRUE',
prevStepForLabel: 'intro-form-radio',
skipStep: 'FALSE',
backLabel:'← Indietro',
nextLabel:'Avanti →',
mode: mode,
type: type
}, true %}
</div>
<div id="results" class="u-mb-large u-mt-large"></div>
</fieldset>
</form>
{% render "@js--form", {
type:type,
mode:mode
}, true %}
{
"limit": 9,
"stories": [
{
"index": 1,
"title": "Coronavirus, la fase 2 tra sicurezza e libertà: tutte le idee per ripartire",
"label": "Emergenza Coronavirus",
"date": "ieri pomeriggio, 15:51",
"author": "Violetto Gorrasi",
"number": 1,
"summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/51380415156697/coronavirus-ansa-4-2-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/51380415156697/coronavirus-ansa-4-2-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 2,
"title": "Casa di riposo degli orrori: anziani legati e bastonati. Le immagini shock",
"label": "Sei arresti",
"date": "ieri pomeriggio, 15:51",
"author": "Matteo Scarlino",
"number": 2,
"summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/19878683460037/casa-di-riposo-palermo-ansa-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 3,
"title": "Coronavirus, negli Usa 2.500 morti in un giorno ma Trump \"ha fretta\" di riaprire",
"label": "Esteri",
"date": "ieri pomeriggio, 15:51",
"author": "Fabio Grilli",
"number": 3,
"summary": "\"Ieri ci sono stati più di 500 morti e i casi totali sono ancora tanti\", dice Giovanni Rezza, direttore del Dipartimento malattie infettive. La richiesta della regione Lombardia di riaprire le attività produttive il 4 maggio ha preso in contropiede il governo",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/31908412136750/donald-trump-coronavirus-ansa-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 4,
"title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
"label": "Lo studio del Touring Club italiano",
"date": "ieri pomeriggio, 15:51",
"author": "Ginevra Nozzoli",
"number": 4,
"summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 5,
"title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
"label": "Lo studio del Touring Club italiano",
"date": "ieri pomeriggio, 15:51",
"author": "Veronica Altimari",
"number": 5,
"summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 6,
"title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
"label": "Lo studio del Touring Club italiano",
"date": "ieri pomeriggio, 15:51",
"author": "Alberto Berlini",
"number": 6,
"summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 7,
"title": "Turismo e coronavirus, quali località più colpite nell'estate 2020",
"label": "Lo studio del Touring Club italiano",
"date": "ieri pomeriggio, 15:51",
"author": "Ginevra Nozzoli",
"number": 7,
"summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-low/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/2304174717311/turismo-crisi-ansa-milano-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 8,
"title": "Muore annegato nella piscina comunale il giorno prima di compiere 7 anni",
"label": "Lo studio del Touring Club italiano",
"date": "ieri pomeriggio, 15:51",
"author": "Fabio Grilli",
"number": 8,
"summary": "Dramma nella piscina comunale a Brescia, in Via Rodi. Un bambino di 7 anni, Ansh S., è annegato. Le urla della mamma hanno allertato il bagnino, ma non c'è stato nulla da fare",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/65846868204321/pisicina-comunale-ansa-archivio-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
},
{
"index": 9,
"title": "Riceve il reddito di cittadinanza, ma ha 40 case e percepisce 120mila euro d'affitto",
"label": "Economia",
"date": "ieri pomeriggio, 15:51",
"author": "Fabio Grilli",
"number": 9,
"summary": "L'uomo è stato denunciato dalla Guardia di finanza a Lanciano, in provincia di Chieti. Gli immobili affittati, oltre quindici, secondo le Fiamme Gialle rendevano alla famiglia del beneficiario del sussidio oltre 120mila euro all'anno",
"media": {
"horizontal": "https://citynews-today.stgy.ovh/~media/horizontal-mid/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
"vertical": "https://citynews-today.stgy.ovh/~media/vertical-hi/56625536121153/evasione-fiscale-controlli-finanza-ansa-2.jpg",
"square": "https://citynews-romatoday.stgy.ovh/~media/square-hi/55989804286522/una-signora-con-il-carrello-della-spesa-al-mercato-plateatico-coperto-laurentino.jpg"
}
}
],
"opinions": [
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "17 luglio, 2020",
"author": "Carlo Sala"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "12 luglio, 2020",
"author": "Massimiliano Dona"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "30 giugno, 2020",
"author": "Luciano Lanna"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "05 giugno, 2020",
"author": "Marilia Parente"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "27 maggio, 2020",
"author": "Dario Balotta"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "13 aprile, 2020",
"author": "Rossella Lamina"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "11 aprile, 2020",
"author": "Dario Balotta"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "04 marzo, 2020",
"author": "Luciano Lanna"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "18 febbraio, 2020",
"author": "Dario Balotta"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "01 febbraio, 2020",
"author": "Rossella Lamina"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "25 gennaio, 2020",
"author": "Dario Balotta"
},
{
"title": "Caso Dentix: quali tutele per i pazienti delle cliniche dentali",
"date": "05 gennaio, 2020",
"author": "Luciano Lanna"
}
],
"googlePlayStoreImg": "/assets/images/site/app/google_play_store.svg",
"iosAppStoreImg": "/assets/images/site/app/ios_app_store.svg"
}
Items templates are used to display forms.
type - toggle input email/phone, accepted values: login, logout, recovery, delete, activate, signup, edit, leadmode - toggle input email/phone, accepted values: email, phone, social, user,zoneRequired - toggle required zone fieldset, accepted values: bolean