Thème Paris.fr
<@cForm name='info' >
<@cFieldset legend='Informations personelles' showLabel=false >
<@cFormRow>
<@cCol>
<@cField label='Nom' for='name' labelData='<small class="text-muted">(Nom de famille)</small>'>
<@cInput name='name' placeholder='Exemple: Durand' helpMsg='Saisir votre nom de famille' />
</@cField>
</@cCol>
<@cCol>
<@cField label='Prénom' for='firstname'>
<@cInput name='firstname' required=false helpMsg='Saisir votre prénom' />
</@cField>
</@cCol>
</@cFormRow>
</@cFieldset>
<@cFormRow>
<@cCol>
<@cLabel label='Activité'>
<@cSelect name='activite' helpMsg='Choisir une activité' >
<@cOption label='' value='0' />
<@cOptgroup label='Sport collectifs' />
<@cOption label='Football' value='1' />
<@cOption label='Basket' value='2' />
<@cOptgroup label='Sport Nautiques' />
<@cOption label='Voile' value='3'/>
<@cOption label='Pédalo' value='4'/>
</@cSelect>
</@cLabel>
</@cCol>
<@cCol cols='4'>
<@cInputDate name='date_info' label='Date du jour' helpMsg='<details style="position: relative;z-index: 100;" ><summary>Aide ?</summary><ul style="width: 32rem; border: 1px solid black;background-color:white; padding:var(--spacing-1) var(--spacing-5); position: absolute;"><li>show ↓ (ArrowDown) Show the picker</li><li>hide N/A Hide the picker</li><li>toggle Esc (Escape) Toggle the deisplay of the picker</li><li>prevButton Ctrl/Meta + ← (ArrowLeft) Perform the Prev button action</li><li>nextButton Ctrl/Meta + → (ArrowRight) Perform the Next button action</li><li>viewSwitch Ctrl/Meta + ↑ (ArrowUp) Perform the View switch action</li><li>clearButton Ctrl/Meta + Backspace Perform the Clear button action</li><li>todayButton Ctrl/Meta + . Perform the Today button action</li><li>exitEditMode Ctrl/Meta + ↓ (ArrowDown) Exit edit mode</li></ul></details>' value=.now?date?iso_utc options={"todayButton":false} />
</@cCol>
</@cFormRow>
<@cFormRow>
<@cCol cols='6'>
<@cInputDateRange name='date_range' label='Créneaux' />
</@cCol>
</@cFormRow>
<@cFieldset legend='Justificatif de domicile' showLabel=false >
<@cFormRow>
<@cCol>
<div class="position-absolute p-3" style="z-index:5;top:0;right:0" >
<div id="liveFileToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header">
<strong class="me-auto">Attention</strong>
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body bg-white text-dark">Pas d'upload possible sur la démo</div>
</div>
</div>
<@cInputDropFiles label='Justificatif de domicile' required=true nbUplodadedFiles=2 name='files_domicile2' id='domicile2' handler={"handlerName":"formsAsynchronousUploadHandler","uploadDeletePrefix":"_form_upload_delete_","uploadCheckboxPrefix":"_form_upload_checkbox_"} hasFiles=true formSubmitButtonName='doSaveForm'>
<@cInputDropFilesItem name='file_Upload_1' label='Mon attestation.docx' idx=1 handler={"handlerName":"formsAsynchronousUploadHandler","uploadDeletePrefix":"_form_upload_delete_","uploadCheckboxPrefix":"_form_upload_checkbox_"} fileSize=3000 ext='DOCX' urlDl='javascript:return false;' urlRm='javascript:return false;' />
<@cInputDropFilesItem name='file_Upload_2' label='Justificatif.docx' idx=1 handler={"handlerName":"formsAsynchronousUploadHandler","uploadDeletePrefix":"_form_upload_delete_","uploadCheckboxPrefix":"_form_upload_checkbox_"} fileSize=60 ext='DOCX' urlDl='javascript:return false;' urlRm='javascript:return false;' />
</@cInputDropFiles>
</@cCol>
</@cFormRow>
</@cFieldset>
<@cFieldset legend='Conservation des données' showLabel=false >
<@cFormRow>
<@cCol params='aria-describedby="mydata"'>
<@cField>
<@cLabel label='Conserver ces données' for='mydata' />
<@cFormRow>
<@cCol role="radiogroup" params="aria-label='choix de la conservation des données'">
<@cRadio name='mydata' id='md2' label='Oui' value='1' inline=true />
<@cRadio name='mydata' id='md1' label='Non' value='2' inline=true />
</@cCol>
</@cFormRow>
</@cField>
</@cCol>
</@cFormRow>
</@cFieldset>
<@cFormRow>
<@cCol>
<@cField class='mt-m'>
<@cBtn label='Annuler' class='tertiary'>
<@parisIcon name='close' />
</@cBtn>
<@cBtn label='Valider' class='primary' id='doSaveForm' />
<@parisIcon name='check' />
</@cBtn>
</@cField>
</@cCol>
</@cFormRow>
</@cForm>
<form method="post" name="info">
<fieldset id="fieldset-id-18391432526851" role="group" aria-labelledby="legend-id-18391432526851"'>
<legend class=" visually-hidden" id="legend-id-18391432526851" >Informations personelles</legend>
<div class="row ">
<div class="col ">
<div class="mb-xs">
<label class="" for="name">
Nom <small class="text-muted">(Nom de famille)</small>
</label>
<p class="form-text " id="help_name">
Saisir votre nom de famille</p>
<input type="text" class=" form-control" name="name" id="name" value="" placeholder="Exemple: Durand" aria-label="Exemple: Durand" aria-describedby="help_name">
</div>
</div>
<div class="col ">
<div class="mb-xs">
<label class="" for="firstname">
Prénom
</label>
<p class="form-text " id="help_firstname">
Saisir votre prénom</p>
<input type="text" class=" form-control" name="firstname" id="firstname" value="" aria-describedby="help_firstname">
</div>
</div>
</div>
<div class="row ">
<div class="col-8 ">
<div class="mb-xs">
<label class="" for="password">
Mot de passe
</label>
<label class="" for="password">
</label>
<p class="form-text " id="help_password">
Please enter your new password. It must contain at least 8 characters, and consist of at least 1 lowercase, 1 uppercase, 1 number and 1 special character.</p>
<div class="input-group password">
<input type="password" class=" form-control pwd form-control-lg" name="password" id="password" value="" maxlength="100" autocomplete="off" required aria-required="true">
<button class="btn btn-secondary toggle-password" type="button"data-bs-toggle="#password" aria-pressed="false" title="Show password" tabindex="0">
<svg class="paris-icon paris-icon-eye-off main-info-color" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-eye-off"></use>
</svg>
</button>
</div>
<div class="row " id="password-password-wrapper">
<div class="col-12 col-md-7 ">
<button class="btn btn-pass font-xs text-underline p-0 mt-xs font-medium-bold cursor-pointer" type="button" id="password-password-generator">
<svg class="paris-icon paris-icon-refresh main-info-color password-refresh" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-refresh"></use>
</svg>
Random proposition
</button>
</div>
<div class="col-12 col-md-5 ">
<div aria-valuemax="100" aria-valuemin="0" aria-valuetext="Password strength : no password entered" aria-label="Password strength :" aria-valuenow="0" role="meter" id="aria-password-meter">
<div class="indicator visually-hidden d-flex align-items-center justify-content-end">
<span>
Security :</span>
<span class="ml-2">
<span class="dot">
</span>
</span>
<span class="meter-text ml-1">
</span>
</div>
</div>
<output class="visually-hidden" for="aria-password-meter"></output>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<div class="row ">
<div class="col-4 ">
<label class="" for="activite">
Activité
</label>
<p class="form-text " id="help_activite">
Choisir une activité</p>
<select name="activite" class="form-select" aria-describedby="help_activite">
<option value="0"></option>
<optgroup label="Sport collectifs" >
</optgroup>
<option value="1">Football</option>
<option value="2">Basket</option>
<optgroup label="Sport Nautiques" >
</optgroup>
<option value="3">Voile</option>
<option value="4">Pédalo</option>
</select>
</div>
<div class="col-4 ">
<label class="" for="date_info">
Date du jour
</label>
<p class="form-text " id="help_date_info">
La date du jour !</p>
<div class="input-group">
<input type="text" class=" form-control" name="date_info" id="date_info" value="2024-12-24">
<svg class="paris-icon paris-icon-agenda" id="date_info" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-agenda"></use>
</svg>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = {todayButton : false, };
const themeOptions = {};
let showFormat=getDatePickerDateFormat( navigator.language );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const elemdate_info = document.querySelector('#date_info')
const dtOptionsdate_info = setDatePickerOptions( themeOptions, customOptions, defaultOptions )
let datepickerdate_info = new themeParisFrDatepicker( elemdate_info, dtOptionsdate_info );
});
</script>
</div>
</div>
<div class="row ">
<div class="col-6 ">
<div class="daterange " id="dtRange">
<label class="" for="dtRange_range_start">
Créneaux
</label>
<div class="input-group">
<input type="text" class=" form-control" name="date_range" id="dtRange_range_start" value="">
<label class="visually-hidden" for="dtRange_range_end">
Créneaux
</label>
<input type="text" class=" form-control" name="date_range_range_end" id="dtRange_range_end" value="">
<div class="input-group-text">
<svg class="paris-icon paris-icon-agenda" id="dtRange" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-agenda"></use>
</svg>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (e) => {
const customOptions = { };
const themeOptions = {};
let showFormat=getDatePickerDateFormat( navigator.language );
let dataFormat='yyyy-m-d 00:00:00' // Default for most DB;
const defaultOptions = {
autohide: true,
buttonClass: 'btn',
dataFormat: dataFormat,
dateDelimiter: '|', // Delimiter for mutlidate
daysOfWeekDisabled: [],
defaultViewDate: 'today',
clearButton: true,
enableReadOnly: true,
format: showFormat,
language: `${navigator.language.split('-')[0]}`,
minDate: null,
maxDate: null,
maxNumberOfDate: 1,
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
orientation: 'auto',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
showDaysOfWeek: true,
showOnClick: true,
showOnFocus: true,
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
title: '',
todayButton: false,
todayButtonMode: 0, // 0 - Focus , 1 - Select
todayHighlight: true,
updateOnBlur: true,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeDefaultOptions = {
title: '',
format: showFormat,
dateDelimiter: '|', // Delimiter for mutlidate
language: `${navigator.language.split('-')[0]}`,
dataFormat: dataFormat,
daysOfWeekDisabled: [],
buttonClass: 'btn',
nextArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_3183)"><path d="M15.5151 13.4729L10.1484 8.10621L12.3093 5.94531L19.8369 13.4729L12.3093 21.0004L10.1484 18.8395L15.5151 13.4729Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_3183"><rect width="28" height="28" fill="white" transform="translate(28 28) rotate(180)"/></clipPath></defs></svg>',
prevArrow: '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6399_4241)"><path d="M12.4849 14.5271L17.8516 19.8938L15.6907 22.0547L8.16309 14.5271L15.6907 6.99955L17.8516 9.16045L12.4849 14.5271Z" fill="#071F32"/></g><defs><clipPath id="clip0_6399_4241"><rect width="28" height="28" fill="white"/></clipPath></defs></svg>',
defaultViewDate: 'today',
todayButton: false,
clearButton: true,
picklevel: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
startView: 0, // 0 - Days 1 - Month, 2 - Year, 3 - Decade
todayHighlight: true,
minDate: null,
maxDate: null,
weekNumbers: 0, // 0 – None, 1 – ISO 8601, 2 – Western traditional, 3 – Middle Eastern, 4 – Guess from weekStart
weekStart: 1,
}
const dtRangeOptionsdtRange = setDatePickerOptions( themeOptions, customOptions, dtRangeDefaultOptions );
const elDtPickerWrapperdtRange = document.getElementById( 'dtRange' );
const rangepickerdtRange = new DateRangePicker( elDtPickerWrapperdtRange, dtRangeOptionsdtRange);
rangepickerdtRange.inputs.forEach((input) => {
let isoInput = null;
input.addEventListener('changeDate', (ev) => {
const {date} = ev.detail;
const dtIso = `${date.toISOString()}`;
if( isoInput === null ){
isoInput = input.cloneNode(true);
input.removeAttribute('name');
isoInput.type = 'hidden';
isoInput.id = input.id + '_hidden';
elDtPickerWrapperdtRange.append( isoInput );
}
isoInput.value = dtIso ;
});
});
});
</script>
</div>
</div>
<fieldset id="fieldset-id-23109719032221" role="group" aria-labelledby="legend-id-23109719032221"'>
<legend class=" visually-hidden" id="legend-id-23109719032221" >Justificatif de domicile</legend>
<div class="row ">
<div class="col ">
<div class="position-absolute p-3" style="z-index:5;top:0;right:0" >
<div id="liveFileToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header">
<strong class="me-auto">Attention</strong>
<button type="button" class="ms-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body bg-white text-dark">Pas d'upload possible sur la démo</div>
</div>
</div>
<input type="hidden" class=" form-control" name="asynchronousupload.handler" id="asynchronousupload.handler" value="formsAsynchronousUploadHandler">
<div class="row group-files dropzone ">
<div class="col">
<label id="lbdomicile2" class="" for="domicile2">Justificatif de domicile <span class="main-danger-color" tabindex="-1" title="Mandatory">*</span></label>
<div id="group-domicile2" class="d-flex align-items-center file-input">
<input type="file" class="form-control my-xs is-required formsAsynchronousUploadHandler"aria-required="true" data-nbuploadedfiles="2" name="files_domicile2" id="domicile2" multiple="multiple">
<svg class="paris-icon paris-icon-upload white-color" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-upload"></use>
</svg>
<p class="flex-1 text-left ms-sm mb-0">Drop your files here or <span class="text-primary text-underline">Browse</span></p>
</div>
<div id="_file_error_box_domicile2"></div>
<div id="progress_domicile2" class="progress" style="display:none;">
<div id="progress-bar_domicile2" class="progress-bar progress-bar-success progress-bar-striped"></div>
</div>
<div class="form-files-group" id="_file_deletion_label_domicile2">
<ul id="_file_deletion_domicile2" class="files-group">
<li class="files-item" id="_file_uploaded_file_Upload_11">
<label class="files-item-label" for="_form_upload_checkbox_file_Upload_11">
<input type="checkbox" name="_form_upload_checkbox_file_Upload_11" id="_form_upload_checkbox_file_Upload_11" tabindex="-1">
<a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=file_Upload_1&field_index=1&fileName=Mon attestation.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" class="files-item-link" title="Download Mon attestation.docx" data-type="DOCX" data-img="">
<span class="file-item-label">Mon attestation.docx</span>
<span class="file-item-info">3 Ko</span>
</a>
</label>
<button type="button" class="btn btn-link main-color deleteSingleFile p-0" data-item="#_file_uploaded_file_Upload_11" fieldName="file_Upload_1" handlerName="formsAsynchronousUploadHandler" index="1" title="Delete Mon attestation.docx">
<svg class="paris-icon paris-icon-close" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</li>
<li class="files-item" id="_file_uploaded_file_Upload_21">
<label class="files-item-label" for="_form_upload_checkbox_file_Upload_21">
<input type="checkbox" name="_form_upload_checkbox_file_Upload_21" id="_form_upload_checkbox_file_Upload_21" tabindex="-1">
<a href="jsp/site/plugins/asynchronousupload/DoDownloadFile.jsp?fieldname=file_Upload_2&field_index=1&fileName=Justificatif.docx&asynchronousupload.handler=formsAsynchronousUploadHandler" class="files-item-link" title="Download Justificatif.docx" data-type="DOCX" data-img="">
<span class="file-item-label">Justificatif.docx</span>
<span class="file-item-info">60 o</span>
</a>
</label>
<button type="button" class="btn btn-link main-color deleteSingleFile p-0" data-item="#_file_uploaded_file_Upload_21" fieldName="file_Upload_2" handlerName="formsAsynchronousUploadHandler" index="1" title="Delete Justificatif.docx">
<svg class="paris-icon paris-icon-close" role="img" aria-hidden="true" focusable="false">
<use xlink:href="#paris-icon-close"></use>
</svg>
</button>
</li>
</ul>
</div>
</div>
</div>
<script>
window.addEventListener( 'DOMContentLoaded', (event) => {
const fieldName = $('#domicile2');
const groupFieldName = $('#group-domicile2');
const labelFieldName = $('#lbdomicile2');
let hasChecked = false, countFiles=2;
mapFilesNumber.set( "domicile2", 0 );
const isInputFileRequired = fieldName.hasClass('is-required');
if( isInputFileRequired ){
if( countFiles > 0 ){ fieldName.attr('data-nbuploadedfiles', countFiles ); }
const validateButton = document.querySelector('#doSaveForm');
validateButton.addEventListener('click', (e) => {
const fileItemsList = $('#_file_deletion_domicile2 .files-item');
const fileUploaded = fileItemsList.length;
$('.form-control:user-invalid').addClass('is-invalid');
$('.form-control:invalid').addClass('is-invalid');
const hasErrors = $(".is-invalid").length;
if( fileUploaded == 0 ){
groupFieldName.addClass('is-invalid');
labelFieldName.addClass('main-danger-color');
if( groupFieldName.next().hasClass('invalid-feedback') ){
groupFieldName.next().text('Le champs est obligatoire')
} else {
groupFieldName.after('<div class="invalid-feedback">Le champs est obligatoire</div>')
}
if( hasErrors == 0 ){
e.preventDefault();
$('html, body').scrollTop( groupFieldName.offset().top - 50 );
}
} else {
groupFieldName.removeClass('is-invalid');
labelFieldName.removeClass('main-danger-color');
}
})
}
});
</script>
</div>
</div>
</fieldset>
<fieldset id="fieldset-id-28828005537591" role="group" aria-labelledby="legend-id-28828005537591"'>
<legend class=" visually-hidden" id="legend-id-28828005537591" >Conservation des données</legend>
<div class="row ">
<div class="col " aria-describedby="mydata">
<div class="mb-xs">
<label class="" for="mydata">
Conserver ces données
</label>
<div class="row ">
<!-- Warning : wrong or deprecated argument(s) : role, ... -->
<div class="col " aria-label='choix de la conservation des données'>
<div class="form-check form-check-inline">
<input type="radio" id="md2" name="mydata" class="form-check-input" value="1">
<label class="form-check-label" for="md2">Oui </label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="md1" name="mydata" class="form-check-input" value="2">
<label class="form-check-label" for="md1">Non </label>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<div class="row ">
<div class="col ">
<div class="mt-m">
<button class="btn btn-tertiary" type="submit">
<svg class="paris-icon paris-icon-close" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-close"></use>
</svg>
<span class="btn-label ">Annuler</span>
</button>
<button class="btn btn-primary" type="submit" id="doSaveForm">
<svg class="paris-icon paris-icon-check" aria-hidden="true" focusable="false" role="img" aria-hidden="true">
<use xlink:href="#paris-icon-check"></use>
</svg>
<span class="btn-label ">Valider</span>
</button>
</div>
</div>
</div>
</form>
<script type="module">
import { themeUtils } from './themes/skin/parisfr/js/modules/theme-utils.js';
const uploadUtils = new themeUtils;
const aAsyncLinksToAddRemove = [{"name":"config.min.js","pathtoremove":"js/plugins/asynchronousupload/","pathtoadd":"themes/skin/parisfr/js/plugins/asynchronousupload/"}]
uploadUtils.replaceSourceLinksFromArray( aAsyncLinksToAddRemove )
</script>
<script>
/* Maps to manage files field errors */
var mapFileErrors = new Map();
var mapFilesNumber = new Map();
</script>
<script src="jsp/site/plugins/asynchronousupload/GetMainUploadJs.jsp?handler=formsAsynchronousUploadHandler" ></script>
<script>
// Demo only
$( document ).on('click', '.deleteSingleFile', function(event) {
event.preventDefault();
const currInput = $('#domicile2');
let nbInputFiles = currInput.attr('data-nbuploadedfiles') - 1
currInput.attr('data-nbuploadedfiles', nbInputFiles )
event.preventDefault( );
event.currentTarget.closest('.files-item').setAttribute('hidden','hidden');
});
$( document ).on('click', '#domicile2', function(event) {
event.preventDefault();
$('#liveFileToast').toast('show')
const hiddenFiles = document.querySelectorAll('[hidden]');
hiddenFiles.forEach( (hf) => {
hf.removeAttribute('hidden');
return;
})
});
const form = document.querySelector('form');
form.addEventListener('submit', (ev) => {
ev.preventDefault();
const formData = new FormData(form);
const aData = new URLSearchParams(formData).toString().replaceAll('&','<br>')
$('#liveFormToast .toast-body').html(`<code>${aData}</pre></code>` );
$('#liveFormToast').toast('show')
});
</script>L'exemple propose plusieurs champs dans un même formulaire. Pour plus d'informations consulter les composants préfixés par "form:" dans la page composants
Le plugin Forms permet de créer des formulaires à étapes par paramétrage.
L'utilisation du plugin Forms avec le thème Paris.fr nécessite le module "module-forms-breadcrumbaccordion" !
Voir un exemple de formulaires construit avec le plugin forms