74 lines
5.2 KiB
HTML
74 lines
5.2 KiB
HTML
{# -*- 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() }}
|
|
{% for subfield in form.correspondants %}
|
|
{% if form.correspondants.errors %}
|
|
<p class="help-block title-form">Formulaire Correspondants-{{ loop.index-1 }}</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 %} |