CODEWITHSUNDEEP
pythonflaskflask-wtforms
arjunhd
arjunhd

Reputation: 57

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

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.

page_screenshot

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?

Upvotes: 0

Views: 349

Answers (1)

arjunhd
arjunhd

Reputation: 57

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

Upvotes: 0

Related Questions