0

I am trying to hide a radiobutton if there is no value given to the form label for this radio. i am using flask and when i load the page, i check if a harddrive is connected, and if not, there should not be an option to check anything.

Python

@app.route('/transfer')
def transfer():
    hardDrive = transfer_files.find_harddrive()         
    if len(hardDrive) == 1:                             
        hardDrive1 = hardDrive[0]
        hardDrive2 = ''
    elif len(hardDrive) == 2:                           
        hardDrive1 = hardDrive[0]
        hardDrive2 = hardDrive[1]
    else:                                              
        hardDrive1 = ''
        hardDrive2 = ''
    return render_template("transfer.html", usb_device1=hardDrive1, usb_device2=hardDrive2) # rückgabe werte

html

<div class="form-check form-check-inline" id="field1">
    <input class="form-check-input" type="radio" name="usb_device" value="option1" id="Check1" checked>    
    <label id="usb_device1" class="col-form-label col-md-4" for="Check1">{{usb_device1}}</label>     
</div>

<div class="form-check form-check-inline" id="field2">
    <input class="form-check-input" type="radio" name="usb_device" value="option2" id="Check2">
    <label id="usb_device2" class="col-form-label col-md-4" for="Check2">{{usb_device2}}</label>           
</div>

JavaScript

if ("usb_device1" == "")
{
    document.getElementById("field1").hidden=true;
} else {
    document.getElementById("field1").hidden=false;
}

if ("usb_device2" == "")
{
    document.getElementById("field2").hidden=true;
} else {
    document.getElementById("field2").hidden=false;
}

i tried different approaches within JavaScript like the one showed before or

document.getElementById("Check1").style.display = 'none'

but nothing worked so far.

Oliver Bucher
  • 3
  • 4

2 Answers2

1

Your JavaScript is checking if the strings "usb_device1" and "usb_device2" are an empty string, which will always be false. You need to compare the variables usb_device1 and usb_device2 to an empty string instead.

Christian Yip
  • 13
  • 3
  • ok, yes i made a mistake with comparing strings which are not equal, changed that. but with: if (document.getElementById("usb_device1").valueOf() == "") or if( document.getElementById("usb_device1") == "") or if( usb_device1 == "") i still get no changed outcome. If i changed true and false in the JS Part, the radiobuttons are gone, which is nice to know it would work – Oliver Bucher Jun 13 '23 at 19:58
0

Since you are using Flask, there is no need for JavaScript, you can simply use the Jinja Templating Engine to check if your variables are empty.

{% if usb_device1 %}
<div class="form-check form-check-inline" id="field1">
    <input class="form-check-input" type="radio" name="usb_device" value="option1" id="Check1" checked>    
    <label id="usb_device1" class="col-form-label col-md-4" for="Check1">{{usb_device1}}</label>     
</div>
{% endif %}

{% if usb_device2 %}
<div class="form-check form-check-inline" id="field2">
    <input class="form-check-input" type="radio" name="usb_device" value="option2" id="Check2">
    <label id="usb_device2" class="col-form-label col-md-4" for="Check2">{{usb_device2}}</label>           
</div>
{% endif %}

As you can see, I have added 2 if statements to check each of these variables.

The first if statement, {% if usb_device1 %} will check if usb_device1 is not empty, and if that evaluates to True, Flask will render all of the code in the if statement (everything between {% if usb_device1 %} and {% endif %}.

The second if statement works exactly the same as the first one, just targeting the usb_device2 variable.

For more info on Jinja if-statements, view this section in the Jinja docs.