When using WTForms in Python Flask app, How to dynamically enable a StringField when a particular SelectField item is chosen?

Question

As the title suggests, I need to activate a particular StringField corresponding to one of the Choices in the SelectField in the following code:

module = SelectField(
        label='Select Module', 
        choices=[
            ('choice1', 'Module 1'),
            ('choice2', 'Module 2'),
            ('choice3', 'Module 3'),
            ('other_choice', 'Other Module')
        ]
    )

When the fourth choice 'Other Module ' is selected, I want the following StringField to be activated:

other_module = StringField(label='Enter Other Module Name')

The HTML code for this form is as follows :

{% extends "base.html" %}

{% block content %}
<div>
    <h2>Webinar Request Form</h2>
    <form action="{{ url_for('webinar_req') }}" method="post">
        {{ form.csrf_token }}
        <p>
            {{ form.module.label }}
            {{ form.module() }}
            {{ form.hidden_tag() }}
        </p>
        <p>
            {{ form.other_module.label }}
            {{ form.other_module(size=30) }}
            {{ form.hidden_tag() }}
        </p>
        <p>
            {{ form.submit }}
        </p>
    </form>
</div>
{% endblock %}

Currently as you can see that TextField is always enabled.

What should be the code like to disable the TextField by default and dynamically enable it in the page when 'Other Module' is selected without hitting Enter button?

Update:

I assigned the

element containing the StringField and its label with an ID to connect with a javascript function in the HTML file and now I'm able to dynamically hide the element when I click an option other than the 4th option.

<p id="other_mod">
    {{ form.other_module.label }}
    {{ form.other_module(size=30) }}
    {{ form.hidden_tag() }}
</p>

<script>
function myFunction() {
  let box_value = document.getElementById("module").value;
  if (box_value === "other_choice") {
    document.getElementById("other_mod").style.visibility = "visible";
  } else {
    document.getElementById("other_mod").style.visibility = "hidden";
  };
};

</script>

Still an issue persists. When the page is initially loaded, by default the StringField element is visible and only when I select an option other than the 4th one from the dropdown list does it change its visibility to hidden.

Is there any way that I can make it hidden when the page loads initially?

arjunhd · Accepted Answer · 2021-08-12 10:34:46Z

0

I solved it finally. I used the 'onload' attribute on body tag and connected it to a javascript function which switched the StringField element's visibility to hidden. That coupled with the other javascript function which works when SubmitField entries are selected seems to achieve the intended purpose.

<body class="container-fluid"
      style="background:#F4C6AC;text-align:center;padding:0px" onload="onLoad();">

<script>
    function onLoad() {
    document.getElementById("other_mod").style.visibility = "hidden";
};
</script>

This proved to be a good opportunity to start learning Javascript. Thank you for pushing me to find the answer on my own by not answering :D

answered Aug 12, 2021 at 10:34

arjunhd

576 bronze badges

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

Collectives™ on Stack Overflow

When using WTForms in Python Flask app, How to dynamically enable a StringField when a particular SelectField item is chosen?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related