You’ll need javascript to prevent a form submit and do validation.
Add the same html class to each checkbox so you can loop over each.
Also, you need an html element for the message you want to show with the class ‘error-message’. Or use the alert() function.
For example:
document.querySelector('#submitControl').addEventListener('click', (event) => {
event.preventDefault();
// get all checkboxes by its class
const checkBoxes = document.querySelectorAll('.checkbox');
let checked = false;
// loop over each checkbox to see if its checked and stop looping if true.
for (let i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked) {
checked = true;
break;
}
}
if (checked) {
// submit form
document.querySelector('form').submit();
} else {
// show popup, for example toggle 'error-message--hidden' class that displays and hides the error message or alert()
document.querySelector('.error-message').classList.toggle('error-message--hidden');
// window.alert('Please select at least one button.')
}
})
I have a problem with checkboxes in Django. So the main issue is how can I check if at least one Button is selected before submit.
My idea is if no button is selected but you press submit, then it pops up a little notification with “Please select at least one button”.
the 4 buttons:
<form method="post" action="{% url 'qrseite' %}">
{% csrf_token %}
<input type="checkbox" id="colaControl" name="getranke" value="cola"/>
<label for="colaControl"><div class="cola" style="border-radius: 10px;">
<img src="{% static 'img/cola_img.png' %}" width="155" height="auto">
</div></label>
<input type="checkbox" id="spriteControl" name="getranke" value="sprite"/>
<label for="spriteControl"><div class="sprite" style="border-radius: 10px;">
<img src="{% static 'img/sprite_img.png' %}" width="120" height="auto">
</div></label>
<div style="clear:both;"></div>
<input type="checkbox" id="fantaControl" name="getranke" value="fanta"/>
<label for="fantaControl"><div class="fanta" style="border-radius: 10px;">
<img src="{% static 'img/fanta_img.png' %}" width="110" height="auto">
</div></label>
<input type="checkbox" id="pepsiControl" name="getranke" value="pepsi"/>
<label for="pepsiControl"><div class="pepsi" style="border-radius: 10px;">
<img src="{% static 'img/pepsi_img.png' %}" width="120" height="auto">
</div></label>
<div style="clear:both;"></div>
<input type="submit" id="submitControl">
<label for="submitControl"><div class="accept_Button" style="border-radius: 10px;">
Bestätigung
<img src="{% static 'img/qrcode_img.png' %}" width="50" height="auto" style="margin-top: ">
</div></a>
</label>
</form>
You can’t do that in Django, it has to be done in JavaScript.
define ID attribute for each input you want to be checked, and then define a js function on submit button, to prevent the form submission and check if at least one of those inputs is checked. then again use javascript jquerys submit function and submit your form. also you need to define an ID for the form itself.
thank your for the Answer. But i still don’t know where do i need to add this code ?
@DaniiO. create a js file and add this code. Then make sure the js file is called on at least the page where you render this form. Read more about staticfiles in your django project here:
