Django check if Checkbox is selected before submit

Question

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. — Klaus D.
– Klaus D., Commented Jun 15, 2020 at 19:03
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. — mh-firouzjah
– mh-firouzjah, Commented Jun 15, 2020 at 19:56

Vincent · Accepted Answer · 2020-06-15 19:49:23Z

3

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

edited Jun 15, 2020 at 19:49

answered Jun 15, 2020 at 19:42

Vincent

1,5641 gold badge15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Danii O. Over a year ago

thank your for the Answer. But i still don't know where do i need to add this code ?

Vincent Over a year ago

@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: docs.djangoproject.com/en/3.0/intro/tutorial06 or here: docs.djangoproject.com/en/3.0/search/?q=static+files

Collectives™ on Stack Overflow

Django check if Checkbox is selected before submit

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related