Question 185740 in Html Question posted in
Some basic documentation can be found here.

Html – show/hide radio button if label is empty

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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search