I want to implement on the web page the sequential display of blocks with data input (i.e. after filling in the first block and pressing the "OK" button, the second block opens, then the third). The button in the last block sends a request to write data.

The problem is that with the help of reguest.form.get I can only receive data from the form in which the button is located. How can I get data from other forms?

I am new to Flask and my code may not be very correct. Maybe you should use javascript?

flask.py

@app.route('/scenario',methods = ['GET', 'POST'])
def control_task():
   if(request.form.get('add') == 'add'):
ts.add_task(request.form['host_info'].get('task'),request.form['host_info'].get('hostId'), request.form['role_info'].get('role'))

html:

<button id='addTask_btn' onclick="hidden_element(addTask_block)">add task</button>

<span id="addTask_block" hidden="true">
    <form name="host_info">
        <select name="task">
           {% for test in tests %}
           <option>{{test}}</option>
           {% endfor %}
        </select>

    </form name='service_info>
        <button onclick="hidden_element('step_2')">Ok</button>

        <div hidden="true" id="step_2">
            <form name="service_info">
                <select id="service" name="service">
                {% for role in hosts[0].roles %}
                <option value="{{role.serviceName}}">{{role.serviceName}}</option>
                {% endfor %}
                </select>
            </form>

            <button onclick="hidden_element('step_3')">Ok</button>
            <button onclick="hidden_element('step_3')">Back</button>

        </div>

        <div id="step_3" hidden="true">
            <form method="post" action="/scenario" name="role_info">
                <select name="role">
                {% for role in hosts[0].roles %}
                <option name="{{role.roleType}}">{{role.roleType}}</option>
                {% endfor %}
                </select>
                <button onclick="hidden_element(step_3)" name="add" value="add">Ok</button>
            </form>
        </div>
</span>


<script type="text/javascript">
    function hidden_element(id){
    document.getElementById(id).hidden = !document.getElementById(id).hidden;
    }
</script>