CODEWITHSUNDEEP
javascripthtmlcheckbox
Danii O.
Danii O.

Reputation: 23

Django check if Checkbox is selected before submit

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>

Upvotes: 0

Views: 1294

Answers (1)

Vincent
Vincent

Reputation: 1564

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.')
    }
})

Upvotes: 3

Related Questions