predemandeForm.html
1 <div class="row currentStepTitleRow">
2 <div class="col-xs-12">
3 <div class="container">
4 <h2 class="current stepTitle" id="step1">
5 <span class="current stepTitleNumber">1</span>
6 <span
7 style="display:inline-block;overflow:hidden;width:80%;vertical-align:middle">#i18n{module.appointment.ants.appointmenttitresearch.form.legend}</span>
8 </h2>
9 </div>
10 </div>
11 </div>
12 <div class="row currentStepContentRow">
13 <div class="col-xs-12">
14 <div class="container" id="current_step">
15 <form method="post" class="form-horizontal"
16 action="jsp/site/Portal.jsp?page=appointmentants&action=presearch">
17 <@messages errors=errors />
18 <input name="page" value="appointmentants" type="hidden">
19 <input name="starting_date_time" id="starting_date_time" value="${starting_date_time!''}" type="hidden">
20 <input name="id_form" id="id_form" value="${id_form!''}" type="hidden">
21 <div class="row">
22 <div class="col-xs-12 col-sm-6">
23 <div class="col-xs-12 formGroupContainer">
24 <div class="form-group" id="nbPlacesToTakeGroup">
25 <label
26 class="col-xs-12 col-sm-4 control-label">#i18n{module.appointment.ants.predemandenumber.label}
27 </label>
28 <div class="col-xs-12 col-sm-8">
29 <input type="number" class="form-control" id="nbPlacesToTake" name="nbPlacesToTake"
30 min="1" max="6" step="1" value="${nbPlacesToTake?default(1)}" title=""
31 oninput="displayInputsFromAntsModuleEvent(event)"
32 required style="width:25%;">
33 <p class=""><small>#i18n{module.appointment.ants.predemandenumber.help}</small> </p>
34 </div>
35 </div>
36 <div class="form-group" id="form-group-default">
37 <label class="col-xs-12 col-sm-4 control-label"
38 id="label-default">#i18n{module.appointment.ants.predemandeserial.label_default}</label>
39 <div class="col-xs-12 col-sm-8">
40 <input type="text" class="form-control" name="predemande_code_1"
41 id="predemande_code_1" pattern="[A-Z0-9]{10}" maxlength=10 required
42 value="${(list_ants_codes[0])!''}"
43 oninvalid="setCustomValidityMessage(id)"
44 oninput="setCustomValidity('')"/>
45 <p class="help-text">
46 <small>#i18n{module.appointment.ants.predemandeserial.help} <a
47 href="https://ants.gouv.fr/"> ants.gouv.fr</a> </small>
48 <div id="warning-message" style="color: red;"></div>
49 </div>
50 </div>
51 <!-- Dynamically added containers will be rendered here -->
52 <div class="form-group" id="form-group-btn">
53 <div class="col-xs-12 col-sm-6 col-md-6 col-sm-offset-6 col-md-offset-6 text-right">
54 <button class="btn btn-primary" type="submit" name="action_presearch">
55 <i class="fa fa-check me-1 " aria-hidden="true"></i> Valider
56 </button>
57 </div>
58 </div>
59 </div>
60 </div>
61 <div class="col-xs-12 col-sm-6">
62 <div class="formGroupContainer" id="message-search"></div>
63 </div>
64 </div>
65 </form>
66 </div>
67 </div>
68 </div>
69
70 <script>
71
72 const labels = [
73 "#i18n{module.appointment.ants.predemandeserial.label_default}",
74 "#i18n{module.appointment.ants.predemandeserial.label_1}",
75 "#i18n{module.appointment.ants.predemandeserial.label_2}",
76 "#i18n{module.appointment.ants.predemandeserial.label_3}",
77 "#i18n{module.appointment.ants.predemandeserial.label_4}",
78 "#i18n{module.appointment.ants.predemandeserial.label_5}",
79 "#i18n{module.appointment.ants.predemandeserial.label_6}"
80 ];
81
82 const inputElementType = "text";
83 const inputElementNameSuffix = "predemande_code_";
84 const inputElementPattern = "[A-Z0-9]{10}";
85 const divTagName = "div";
86 const labelTagName = "label";
87 const inputTagName = "input";
88 const helptTextClassName = "help-text";
89 const antsLink = "https://ants.gouv.fr";
90 const firstPartAntsPlatformLink = '<a href="';
91 const lastPartAntsPlatformLink = '">ants.gouv.fr</a>';
92 const predemandeInputHelpMassage = "#i18n{module.appointment.ants.predemandeserial.help}";
93 const erroMessage = "#i18n{module.appointment.ants.predemandeForm.erroMessage}";
94 const customValidityMessage = "#i18n{module.appointment.ants.predemandeForm.customValidityMessage}";
95
96 function setCustomValidityMessage(idN) {
97 var inputElement = document.getElementById(idN);
98
99 if (inputElement) {
100 inputElement.setCustomValidity(customValidityMessage);
101 }
102 }
103
104 function predemandeCodeInput(inputValue, inputContainer, labelDefault) {
105
106 // Retrieve the list of ANTS codes if they were entered previously
107 var listAntsCodes = [<#if list_ants_codes??><#list list_ants_codes as code>'${code}',</#list></#if>];
108
109 // Select all elements with class "form-group"
110 var formGroups = document.querySelectorAll('.form-group');
111
112 // Loop through each form-group element and remove it if it's not form-group-btn
113 for (var i = 2; i < formGroups.length; i++) {
114 var id = formGroups[i].getAttribute('id');
115 if (id !== 'form-group-btn') {
116 formGroups[i].parentNode.removeChild(formGroups[i]);
117 }
118 }
119
120 // handle label-default
121 labelDefault.textContent = labels[inputValue > 1 ? 1 : 0];
122
123 // Create additional input elements based on the entered number
124 const fragment = document.createDocumentFragment();
125 for (let i = 2; i <= inputValue; i++) {
126
127 const formGroupDiv = document.createElement(divTagName);
128 formGroupDiv.classList.add("form-group");
129
130 const inputLabel = document.createElement(labelTagName);
131 inputLabel.textContent = labels[i];
132 inputLabel.classList.add('col-xs-12', 'col-sm-4', 'control-label');
133
134 const inputWrapper = document.createElement(divTagName);
135 inputWrapper.classList.add('col-xs-12', 'col-sm-8');
136
137 const inputElement = document.createElement(inputTagName);
138 inputElement.type = inputElementType;
139 inputElement.classList.add("form-control");
140 inputElement.name = inputElementNameSuffix.concat(i);
141 inputElement.id = inputElementNameSuffix.concat(i);
142 inputElement.pattern = inputElementPattern;
143 inputElement.maxLength=10;
144 inputElement.required = true;
145
146 inputWrapper.appendChild(inputElement);
147
148 // Set the application number value in the input field
149 if(listAntsCodes[i-1]) {
150 inputElement.value = listAntsCodes[i-1];
151 }
152 else {
153 inputElement.value = "";
154 }
155
156 var linkToAntsPlateform = firstPartAntsPlatformLink.concat(antsLink).concat(lastPartAntsPlatformLink);
157
158 const helpText = document.createElement("p");
159 helpText.classList.add(helptTextClassName);
160 const helpTextSmall = document.createElement("small");
161 helpTextSmall.innerHTML = predemandeInputHelpMassage.concat(" ").concat(linkToAntsPlateform);
162 helpText.appendChild(helpTextSmall);
163 inputWrapper.appendChild(helpText);
164
165 formGroupDiv.appendChild(inputLabel);
166 formGroupDiv.appendChild(inputWrapper);
167
168 fragment.appendChild(formGroupDiv);
169
170 inputElement.oninvalid = function() {
171 setCustomValidityMessage(inputElement.id);
172 };
173
174 inputElement.oninput = function() {
175 inputElement.setCustomValidity('');
176 };
177 }
178
179 inputContainer.parentNode.insertBefore(fragment, inputContainer.nextSibling);
180
181 }
182
183 function displayInputsFromAntsUrlParameterValue() {
184 const inputValue = document.getElementById('nbPlacesToTake').value;
185 const inputContainer = document.getElementById('form-group-default');
186 const labelDefault = document.getElementById('label-default');
187 if (inputValue <= 6) {
188 predemandeCodeInput(inputValue, inputContainer, labelDefault);
189 } else {
190 alert(erroMessage);
191 }
192 }
193
194 displayInputsFromAntsUrlParameterValue();
195
196 function displayInputsFromAntsModuleEvent(event) {
197 const group = document.getElementById('nbPlacesToTakeGroup');
198 const inputNbToTake = document.getElementById('nbPlacesToTake');
199 const inputValue = parseInt(event.target.value);
200 const inputContainer = document.getElementById('form-group-default');
201 const labelDefault = document.getElementById('label-default');
202 const helpBlock = document.getElementById('help-block');
203
204 if (inputValue <= 6) {
205 if (helpBlock) {
206 helpBlock.remove();
207 }
208 group.classList.remove('has-warning');
209 predemandeCodeInput(inputValue, inputContainer, labelDefault);
210 } else {
211 if (!helpBlock) {
212 const errorElement = document.createElement('span');
213 errorElement.setAttribute("id", "help-block");
214 errorElement.classList.add("help-block");
215 errorElement.textContent = erroMessage;
216 group.prepend(errorElement);
217 }
218 group.classList.add('has-warning');
219 event.target.value = 1;
220 predemandeCodeInput(1, inputContainer, labelDefault);
221 }
222 }
223
224 $(function () {
225 $('#message-search').html($('#searchmessage').html());
226 });
227
228 </script>