[FIXED] Using python, how can i check if a html checkbox is hidden, and if it's checked?

Issue

In an HTML form, I have a checkbox which class is 'hidden' or not, depending on the user's previous choices.

This is my HTML javascript code which creates the checkbox

const cityBusesLabel = document.createElement('label');
cityBusesLabel.textContent = `Use of city buses`;
const cityBusesInput = document.createElement('input');
cityBusesInput.type = 'checkbox';
cityBusesInput.name = `cityBuses ${venueNumber}-${originCounter}`;
cityBusesInput.id = `cityBusesInput ${venueNumber}-${originCounter}`;
cityBusesInput.classList.add('hidden');
cityBusesLabel.id = `cityBusesLabel ${venueNumber}-${originCounter}`;
cityBusesLabel.classList.add('hidden');
cityBusesLabel.appendChild(cityBusesInput);

And this is the HTML javascript code that shows / hides it :

document.getElementById('venue_location_' + venueNumber).addEventListener('input', function() { 
    const select_value = document.getElementById('venue_location_' + venueNumber).value;
    if (select_value === 'suburban') {
        document.getElementById('cityBusesInput ' + venueNumber + '-' + originCounter).classList.remove('hidden');
        document.getElementById('cityBusesLabel ' + venueNumber + '-' + originCounter).classList.remove('hidden');
    } else {
        document.getElementById('cityBusesInput ' + venueNumber + '-' + originCounter).classList.add('hidden');
        document.getElementById('cityBusesLabel ' + venueNumber + '-' + originCounter).classList.add('hidden');
    }
});

Now, in my app.py python code using Flask, I am trying to check first of all if the checkbox is hidden or not, and second of all if it's checked or not.

I tried writing :

cityBuses_checkbox = request.form.get(f'cityBuses {i}-{origin_counter}')
if cityBuses_checkbox :
    if cityBuses_checkbox == 'on' :
         city_buses.append(1)
    else :
         city_buses.append(0)

But it didn't give me the output I wanted. Is this the right way to do these two checks?

Solution

Modify your JavaScript to include information about whether the checkbox is hidden and whether it's checked in the request sent to the server.

// Create hidden inputs to store the visibility and checked status
const cityBusesHiddenInput = document.createElement('input');
cityBusesHiddenInput.type = 'hidden';
cityBusesHiddenInput.name = `cityBusesHidden ${venueNumber}-${originCounter}`;
cityBusesHiddenInput.value = cityBusesInput.classList.contains('hidden') ? 'hidden' : 'visible';

const cityBusesCheckedInput = document.createElement('input');
cityBusesCheckedInput.type = 'hidden';
cityBusesCheckedInput.name = `cityBusesChecked ${venueNumber}-${originCounter}`;
cityBusesCheckedInput.value = cityBusesInput.checked ? 'checked' : 'unchecked';

// Append the hidden inputs to your form
// ... (append these inputs to the form element)

On the server-side, in your Flask app, you can retrieve these values and process them accordingly.

from flask import request

# In your route handling function
cityBusesHidden = request.form.get(f'cityBusesHidden {i}-{origin_counter}')
cityBusesChecked = request.form.get(f'cityBusesChecked {i}-{origin_counter}')

if cityBusesHidden != 'hidden':
    if cityBusesChecked == 'checked':
        city_buses.append(1)
    else:
        city_buses.append(0)

Answered By - Adesoji Alu