{# -*- mode: jinja-html -*- #} {% extends 'base.html' %} {% import 'bootstrap/wtf.html' as wtf %} {% block styles %} {{super()}} {% endblock %} {% block app_content %} <h1>{{ title }}</h1> <br> <div class="row"> <div class="col-md-4"> <p> (*) champs requis </p> <form method="POST" action="" novalidate> {{ form.hidden_tag() }} {{ form.correspondants.label }} {% for subfield in form.correspondants %} {% if subfield.errors %} <p class="title-form-error">Formulaire {{ subfield.label.text }}</p> {% endif %} {% for subsubfield in subfield %} {% if subsubfield.errors %} {% for error in subsubfield.errors %} <p class="help-block form-error">{{ error }}</p> {% endfor %} {% endif %} {% endfor %} {% endfor %} {{ form.correspondants }} <div style="margin-bottom: 10px;"> <button class="btn btn-default" id="add-correspondant-field">Ajouter un correspondant</button> <input class="btn btn-default" type="submit" value="Envoyer"> </div> </form> </div> </div> <script> let allCorrepondantsFieldWrapper = document.getElementById('correspondants'); let allCorrepondantsForm = allCorrepondantsFieldWrapper.getElementsByTagName('li'); for(let i = 0; i < allCorrepondantsForm.length; i++) { let form_id = allCorrepondantsForm[i].getElementsByTagName('table')[0].id if(form_id.split('-')[1] != 0) allCorrepondantsForm[i].insertAdjacentHTML('beforeend', `<div class="btn btn-default btn-remove" onclick="deleteForm('${form_id}')">Retirer ce correspondant</div>`) } window.onload = function(e) { let addCorrespondantFieldBtn = document.getElementById('add-correspondant-field'); addCorrespondantFieldBtn.addEventListener('click', function(e){ e.preventDefault(); let allCorrepondantsFieldWrapper = document.getElementById('correspondants'); let allCorrepondantsField = allCorrepondantsFieldWrapper.getElementsByTagName('input'); let correspondantInputIds = [] let csrf_token = document.getElementById('csrf_token').value; for(let i = 0; i < allCorrepondantsField.length; i++) { correspondantInputIds.push(parseInt(allCorrepondantsField[i].name.split('-')[1])); } let newFieldName = `correspondants-${Math.max(...correspondantInputIds) + 1}`; allCorrepondantsFieldWrapper.insertAdjacentHTML('beforeend',` <li> <label for="${newFieldName}">Correspondants-${Math.max(...correspondantInputIds) + 1}</label> <table id="${newFieldName}"> <tr><th><label for="${newFieldName}-civilite">Civilité (*)</label></th><td><select class="form-control" id="${newFieldName}-civilite" name="${newFieldName}-civilite" required><option value="H">Monsieur</option><option value="F">Madame</option></select></td></tr> <tr><th><label for="${newFieldName}-nom">Nom (*)</label></th><td><input class="form-control" id="${newFieldName}-nom" name="${newFieldName}-nom" required type="text" value=""></td></tr> <tr><th><label for="${newFieldName}-prenom">Prénom (*)</label></th><td><input class="form-control" id="${newFieldName}-prenom" name="${newFieldName}-prenom" required type="text" value=""></td></tr> <tr><th><label for="${newFieldName}-telephone">Téléphone (*)</label></th><td><input class="form-control" id="${newFieldName}-telephone" name="${newFieldName}-telephone" type="text" value=""></td></tr> <tr><th><label for="${newFieldName}-mail">Mail (*)</label></th><td><input class="form-control" id="${newFieldName}-mail" name="${newFieldName}-mail" type="text" value=""></td></tr> <tr><th><label for="${newFieldName}-poste">Poste</label></th><td><input class="form-control" id="${newFieldName}-poste" name="${newFieldName}-poste" type="text" value=""></td></tr> <tr><th><label for="${newFieldName}-service">Service</label></th><td><input class="form-control" id="${newFieldName}-service" name="${newFieldName}-service" type="text" value=""></td></tr> <tr><th><label for="${newFieldName}-origine">Origine</label></th><td><input class="form-control" id="${newFieldName}-origine" name="${newFieldName}-origine" type="text" value=""></td></tr> <tr><th><label for="${newFieldName}-notes">Notes</label></th><td><input class="form-control" id="${newFieldName}-notes" name="${newFieldName}-notes" type="text" value=""></td></tr> </table> <input id="${newFieldName}-csrf_token" name="${newFieldName}-csrf_token" type="hidden" value=${csrf_token}> <div class="btn btn-default btn-remove" onclick="deleteForm('${newFieldName}')">Retirer ce correspondant</div> </li> `); }); } function deleteForm(x) { var li_form = document.querySelector(`label[for=${x}]`).closest('li'); if (li_form) { li_form.remove() } } </script> {% endblock %}