Flask for to have result as variable-CodePudding

I have below form which selects the data and redirects to the page user_data

It selects the date and redirects to another page. Am able to get the data using request.form['Period'] method in python. But this is not getting called in form action <form action = "/user_data/{{period}}" method="POST"> period variable is empty resulting in Not Found error.

Is there a way to select a value and pass it into a same form

<form action = "/user_data/{{period}}" method="POST">
    <label for = "Period" id = "Period">Period</label>
    <input list="User_Listing_Period" id ="User_Lst_Period" name = "Period">
        <datalist id = "User_data_Period">
            {% for row in user_dat_filter %}
            <option name = "User_Dat_Period" value = "{{row[0]}}"></option>
            {% endfor %}
        </datalist>

    <div >
        <label for = "Submit" id = "Submit"></label>
        <button type="submit">Submit</button>
    </div>

CodePudding user response：

two options here:

let form direct to url /user_data, and based on the Period value renders the page i.e it renders the data for that month.
as value is based on user selection, JS can be utilized.

<html>
    <body>
<form action = "/user_data/{{period}}" method="POST" id="myForm">
    <label for = "Period" id = "Period">Period</label>
    <input list="User_Listing_Period" id ="User_Lst_Period" name = "Period">
        <datalist id = "User_Listing_Period">
          <!-- I commented this, so can check in HTML, you can go with your code
            {% for row in user_dat_filter %} -->
            <option name = "User_Dat_Period" value = "Aug22"></option>
            <option name = "User_Dat_Period" value = "Sep22"></option>
            <option name = "User_Dat_Period" value = "Oct222"></option>
               <!-- {% endfor %} -->
        </datalist>
    <div >
        <label for = "Submit" id = "Submit"></label>
        <button type="submit">Submit</button>
    </div>
    </form>
    <script>
        const myform= document.getElementById("myForm")//identify the form
        // add a listener to myform
        myform.addEventListener('submit', async (e) => {
            e.preventDefault(); //block default submit
            const selectedOption=document.getElementById("User_Lst_Period")
            let value = selectedOption.value
            document.location.href='/user_data/'   value //redirect to value selected by user


        })
    </script>
</body>
</html>