0

I'm trying to make a form where the user logs an action they've done. Because there were too many actions, they are now split into categories and then, based on which category the user chooses, the relevant actions are shown in a second select field.

Some of the actions also require a quantity to be submitted, so I wanted to render an input field when the user selected the actions where a quantity would be relevant.

I've been trying with JS for hours and having no success.

Is there a way to do this using Flask-WTF and HiddenField or something similar?

My form's HTML template:

{% extends "layout.html" %}

{% block title %}
    Record an action
{% endblock %}

{% block main %}
    <div class="padder form-padder">
        <form action="/record" method="post">
            {% from "_formhelpers.html" import render_field %}
            {{ render_field(form.action_cat) }}
            {{ render_field(form.action_desc) }}
            <div class="form-group" id="quantity_div">
                <label for="quantity"></label>
                <input id="quantity">
            </div>
            <button class="btn btn-success" type="submit">Record</button>
        </form>
    </div>

    <script>
        let cat_select = document.getElementById('action_cat')
        let desc_select = document.getElementById('action_desc')
        let hidden_field = document.getElementById('quantity')

        cat_select.onchange = function() {
            cat = cat_select.value;

            fetch('/action/' + cat).then(function(response) {
                response.json().then(function(data) {
                    let optionHTML = '';

                    for (let action of data.actions) {
                        optionHTML += '<option value"' + action.id + '">' + action.desc + '</option>';
                    }

                    desc_select.innerHTML = optionHTML;
                })
            })
        }

    </script>
{% endblock %}

Any advice would be greatly appreciated thank you.

You must log in to answer this question.

Browse other questions tagged .