I have a modal used for adding a new record to the database. However the choices are not being rendered in the choice fields.
The modal:
{% load crispy_forms_tags %}
<li class="nav-item">
<a class="nav-link active text-white ms-2" data-bs-toggle="modal" data-bs-target="#add_recordModal">Tilføj sag</a>
</li>
<div class="modal fade" id="add_recordModal" tabindex="-1" aria-labelledby="add_recordModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form method="post" action="{% url 'add_record' %}">
{% csrf_token %}
<div class="modal-header">
<h5 class="modal-title" id="add_recordModalLabel">Tilføj sag</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" style="margin-left:1.5%">
<form method="POST" action="{% url 'add_record' %}" id="addRecordForm">
<h6 style="color: black;"><strong>Standardoplysninger</strong></h6>
<br>
<div class="row">
<div class="col-md-6">
<label for="id_BFE_Nummer" style="color:black; font-size: 14px;">BFE Nummer*</label>
<input type="number" id="id_BFE_Nummer" name="BFE_Nummer" value="{{ customer_record.BFE_Nummer }}" placeholder="BFE Nummer" class="form-control">
<br>
</div>
<div class="col-md-6">
<label for="id_Adresse" style="color:black; font-size: 14px;">Adresse</label>
<input type="text" id="id_Adresse" name="Adresse" value="{{ customer_record.Adresse }}" placeholder="Adresse" class="form-control">
<br>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="id_Mail" style="color:black; font-size: 14px;">By</label>
<input type="text" id="id_By" name="By" value="{{ customer_record.By}}" placeholder="By" class="form-control">
<br>
</div>
<div class="col-md-6">
<label for="id_Kommune" style="color:black; font-size: 14px;">Kommune</label>
<input type="text" id="id_Kommune" name="Kommune" value="{{ customer_record.Kommune}}" placeholder="Kommune" class="form-control">
<br>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="id_Postnummer" style="color:black; font-size: 14px;">Postnummer</label>
<input type="text" id="id_Postnummer" name="Postnummer" value="{{ customer_record.Postnummer}}" placeholder="Postnummer" class="form-control">
<br>
</div>
<div class="col-md-6">
<label for="id_Region" style="color:black; font-size: 14px;">Region</label>
<input type="text" id="id_Region" name="Region" value="{{ customer_record.Region}}" placeholder="Region" class="form-control">
<br>
</div>
</div>
<h6 style="color: black;"><strong>Kontaktinfo</strong></h6>
<br>
<div class="row">
<div class="col-md-6">
<label for="id_Kontaktperson" style="color:black; font-size: 14px;">Kontaktperson*</label>
<input type="text" id="id_Kontaktperson" name="Kontaktperson" value="{{ customer_record.Kontaktperson }}" placeholder="Kontaktperson" class="form-control">
<br>
</div>
<div class="col-md-6">
<label for="id_Mail" style="color:black; font-size: 14px;">Mail*</label>
<input type="text" id="id_Mail" name="Mail" value="{{ customer_record.Mail }}" placeholder="Mail" class="form-control">
<br>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="id_Telefonnummer" style="color:black; font-size: 14px;">Telefonnummer</label>
<input type="text" id="id_Telefonnummer" name="Telefonnummer" value="{{ customer_record.Telefonnummer }}" placeholder="Telefonnummer" class="form-control">
<br>
</div>
<div class="col-md-6">
<label for="id_Resights" style="color:black; font-size: 14px;">Resights</label>
<input type="text" id="id_Resights" name="Resights" value="{{ customer_record.Resights }}" placeholder="Resights" class="form-control">
<br>
</div>
</div>
<h6 style="color: black;"><strong>Sagsoplysninger</strong></h6>
<br>
<div class="row">
<div class="col-md-6">
<label for="id_Status" style="color:black; font-size: 14px;">Status*</label>
<select id="id_Status" name="Status" class="form-control">
{% for choice in customer_record.Typen %}
<option value="{{ choice.0 }}" {% if customer.Status == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
{% endfor %}
</select>
<br>
</div>
<div class="col-md-6">
<label for="id_Lead" style="color:black; font-size: 14px;">Lead*</label>
<select id="id_Lead" name="Lead" class="form-control">
{% for choice in add_record.Ansvarlig %}
<option value="{{ choice.0 }}" {% if add_record.Lead == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
{% endfor %}
</select>
<br>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="opfolgningsdato-input-wrapper">
<label for="id_Opfølgningsdato" style="color:black; font-size: 14px;">Opfølgningsdato</label>
<input type="date" id="id_Opfølgningsdato" name="Opfølgningsdato" value="{{ customer_record.Opfølgningsdato|date:'Y-m-d' }}" placeholder="Opfølgningsdato" class="form-control">
<br>
</div>
</div>
<div class="col-md-6">
<div id="lukket-aftale-status-wrapper">
<label for="id_Lukket_aftale_Status" style="color:black; font-size: 14px;">Status på aftale</label>
<select id="id_Lukket_aftale_Status" name="Lukket_aftale_Status" class="form-control">
{% for choice in customer_record.Aftale %}
<option value="{{ choice.0 }}" {% if record.Lukket_aftale_Status == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
{% endfor %}
</select>
<br>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div id="opfolgningsdato-input-wrapper">
<label for="id_Opfølgningsdato" style="color:black; font-size: 14px;">Opfølgningsdato</label>
<input type="date" id="id_Opfølgningsdato" name="Opfølgningsdato" value="{{ customer_record.Opfølgningsdato|date:'Y-m-d' }}" placeholder="Opfølgningsdato" class="form-control">
</div>
</div>
<div class="col-md-6">
<div id="moedestatus-wrapper">
<label for="id_Moedestatus" style="color:black; font-size: 14px;">Mødestatus</label>
<select id="id_Moedestatus" name="Moedestatus" class="form-control">
{% for choice in customer_record.Mstatus %}
<option value="{{ choice.0 }}" {% if customer_record.Moedestatus == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
{% endfor %}
</select>
<br>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="id_Kommuneplan" style="color:black; font-size: 14px;">Kommuneplan</label>
<input type="text" id="id_Kommuneplan" name="Kommuneplan" value="{{ customer_record.Kommuneplan }}" placeholder="Kommuneplan" class="form-control">
<br>
</div>
<div class="col-md-6">
<label for="id_Lokalplan" style="color:black; font-size: 14px;">Lokalplan</label>
<input type="text" id="id_Lokalplan" name="Lokalplan" value="{{ customer_record.Lokalplan}}" placeholder="Lokalplan" class="form-control">
<br>
</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="col-md-6">
<label for="id_Formaal" style="color:black; font-size: 14px;">Formål</label>
<input type="text" id="id_Formaal" name="Formaal" value="{{ customer_record.Formaal}}" placeholder="Formål" class="form-control">
<br>
</div>
<div class="col-md-6">
<label for="id_Salgssum" style="color:black; font-size: 14px;">Salgssum</label>
<input type="number" id="id_Salgssum" name="Salgssum" value="{{ customer_record.Salgssum}}" placeholder="Salgssum" class="form-control">
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuller</button>
<button type="submit" class="btn btn-secondary">Tilføj sag</button>
</div>
</form>
</div>
</div>
</div>
Script:
<script>
$(function() {
$.datepicker.setDefaults($.datepicker.regional['da']);
$('.datepicker').datepicker({
dateFormat: 'yy-mm-dd'
});
$( "#id_Forfaldsdato" ).datepicker({
dateFormat: 'yy-mm-dd',
monthNames: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
dayNamesMin: ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'],
changeYear: true,
changeMonth: true
});
});
</script>
<script>
$(function() {
$.datepicker.setDefaults($.datepicker.regional['da']);
$('.datepicker').datepicker({
dateFormat: 'yy-mm-dd'
});
$( "#id_Opfølgningsdato" ).datepicker({
dateFormat: 'yy-mm-dd',
monthNames: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'],
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'],
dayNamesMin: ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'],
changeYear: true,
changeMonth: true
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Get the date input field
const dateInput = document.querySelector('input[name="Forfaldsdato"]');
const statusSelect = document.getElementById('id_Status');
const lostStatusWrapper = document.getElementById('lost-status-wrapper');
const lukketAftaleStatusWrapper = document.getElementById('lukket-aftale-status-wrapper');
const moedestatusWrapper = document.getElementById('moedestatus-wrapper');
const forfaldsdatoInput = document.getElementById('forfaldsdato-input-wrapper');
const opfolgningsdatoInput = document.getElementById('opfolgningsdato-input-wrapper');
const m2Input = document.getElementById('id_m2');
const bebyggelsesprocentInput = document.getElementById('id_Bebyggelsesprocent');
const arealBm2Input = document.getElementById('id_areal_bm2');
const byggemeterprisInput = document.getElementById('id_Byggemeterpris');
const salgssumInput = document.getElementById('id_Salgssum');
// Form submission validation
document.querySelector('form').addEventListener('submit', function(event) {
if (!/^d{2}-d{2}-d{4}$/.test(dateInput.value)) {
alert('Datoformat skal være yyyy-mm-dd');
event.preventDefault();
}
});
// Date input blur event
dateInput.addEventListener('blur', function() {
if (!/^d{2}-d{2}-d{4}$/.test(dateInput.value)) {
dateInput.setCustomValidity('Datoformat skal være yyyy-mm-dd');
} else {
dateInput.setCustomValidity('');
}
});
// Status change event
statusSelect.addEventListener('change', function() {
if (this.value === 'Lukket aftale') {
lukketAftaleStatusWrapper.style.display = 'block';
moedestatusWrapper.style.display = 'none';
forfaldsdatoInput.style.display = 'block';
opfolgningsdatoInput.style.display = 'none';
lostStatusWrapper.style.display = 'none';
} else if (this.value === 'Møde booket') {
lukketAftaleStatusWrapper.style.display = 'none';
moedestatusWrapper.style.display = 'block';
forfaldsdatoInput.style.display = 'none';
opfolgningsdatoInput.style.display = 'block';
lostStatusWrapper.style.display = 'none';
} else {
lukketAftaleStatusWrapper.style.display = 'none';
moedestatusWrapper.style.display = 'none';
forfaldsdatoInput.style.display = 'none';
opfolgningsdatoInput.style.display = 'block';
lostStatusWrapper.style.display = 'block';
}
});
statusSelect.dispatchEvent(new Event('change'));
// Calculate Areal BM2
m2Input.addEventListener('input', calculateArealBm2);
bebyggelsesprocentInput.addEventListener('input', calculateArealBm2);
function calculateArealBm2() {
if (m2Input.value && bebyggelsesprocentInput.value) {
const m2 = parseFloat(m2Input.value);
const bebyggelsesprocent = parseFloat(bebyggelsesprocentInput.value);
const arealBm2 = m2 * (bebyggelsesprocent / 100);
arealBm2Input.value = arealBm2.toFixed(0);
} else {
arealBm2Input.value = 0.2 * (m2Input.value || 0);
}
}
// Limit Bebyggelsesprocent to 100
bebyggelsesprocentInput.addEventListener('input', function() {
if (this.value > 100) {
this.value = 100;
}
});
// Calculate Salgssum
byggemeterprisInput.addEventListener('input', calculateSalgssum);
salgssumInput.addEventListener('input', calculateSalgssum);
arealBm2Input.addEventListener('input', calculateSalgssum);
function calculateSalgssum() {
if (arealBm2Input.value && byggemeterprisInput.value) {
const arealBm2 = parseFloat(arealBm2Input.value);
const byggemeterpris = parseFloat(byggemeterprisInput.value);
const salgssum = arealBm2 * byggemeterpris;
salgssumInput.value = salgssum.toFixed(0);
} else {
salgssumInput.value = 0;
}
}
});
</script>
View:
def add_record(request):
if not request.user.is_authenticated:
messages.error(request, "Du skal være logget ind for at se siden")
return redirect('home')
if not request.user.is_staff:
messages.error(request, "Du har ikke rettigheder til dette område")
return redirect('home')
form = AddRecordForms(request.POST or None)
if request.method == "POST":
if form.is_valid():
bfe_nummer = form.cleaned_data['BFE_Nummer']
if not Record.objects.filter(BFE_Nummer=bfe_nummer).exists():
add_record = form.save()
messages.success(request, "Registrering er tilføjet...")
return redirect('Record', pk=add_record.pk)
else:
messages.error(request, "Registreringen findes allerede...")
return render(request, 'add_record.html', {'form':form})
return render(request, 'add_record.html', {'form':form})
I’ve tried changing the view, how i render it and the naming of the model in the modal. Nothing seems to work. Also tried running it through AI, and that did nothing