{# -*- mode: jinja-html -*- #} {% extends 'base.j2' %} {% import 'wtf.j2' as wtf %} {% block styles %} {{super()}} <link type="text/css" rel="stylesheet" href="/ScoDoc/static/css/autosuggest_inquisitor.css" /> <script src="/ScoDoc/static/libjs/AutoSuggest.js"></script> {% endblock %} {% block app_content %} <h1>Envoyer une offre</h1> <br> <div class="row"> <div class="col-md-4"> <p> (*) champs requis </p> <form method="POST" action="" novalidate> {{ form.hidden_tag() }} {{ form.responsables.label }} {% for error in form.responsables.errors %} <p class="help-block form-error">{{ error }}</p> {% endfor %} {{ form.responsables }} <div style="margin-bottom: 10px;"> <button class="btn btn-default" id="add-responsable-field">Ajouter un responsable</button> {{ form.submit(class_="btn btn-default") }} {{ form.cancel(class_="btn btn-default") }} </div> </form> </div> </div> <script> let allResponsablesFieldWrapper = document.getElementById('responsables'); let allResponsablesField = allResponsablesFieldWrapper.getElementsByTagName('li'); for (let i = 0; i < allResponsablesField.length; i++) { let form_id = allResponsablesField[i].getElementsByTagName('input')[0].id if (form_id.split('-')[1] != 0) allResponsablesField[i].insertAdjacentHTML('beforeend', `<div class="btn btn-default btn-remove" onclick="deleteForm('${form_id}')">Retirer</div>`) } window.onload = function (e) { var responsables_options = { script: "/ScoDoc/entreprises/responsables?", varname: "term", json: true, noresults: "Valeur invalide !", minchars: 2, timeout: 60000 }; let allResponsablesFieldWrapper = document.getElementById('responsables'); let allResponsablesField = allResponsablesFieldWrapper.getElementsByTagName('input'); for (let i = 0; i < allResponsablesField.length; i++) { new bsn.AutoSuggest(allResponsablesField[i].id, responsables_options); } let addResponsableFieldBtn = document.getElementById('add-responsable-field'); addResponsableFieldBtn.addEventListener('click', function (e) { e.preventDefault(); let allResponsablesFieldWrapper = document.getElementById('responsables'); let allResponsablesField = allResponsablesFieldWrapper.getElementsByTagName('input'); let responsableInputIds = [] for (let i = 0; i < allResponsablesField.length; i++) { responsableInputIds.push(parseInt(allResponsablesField[i].name.split('-')[1])); } let newFieldName = `responsables-${Math.max(...responsableInputIds) + 1}`; allResponsablesFieldWrapper.insertAdjacentHTML('beforeend', ` <li> <label for="${newFieldName}">Responsable (*)</label> <input class="form-control" id="${newFieldName}" name="${newFieldName}" type="text" value="" placeholder="Tapez le nom du responsable de formation"> <div class="btn btn-default btn-remove" onclick="deleteForm('${newFieldName}')">Retirer</div> </li> `); var as_r = new bsn.AutoSuggest(newFieldName, responsables_options); }); } function deleteForm(x) { var li_form = document.querySelector(`label[for=${x}]`).closest('li'); if (li_form) { li_form.remove() } } </script> {% endblock %}