Read from two different forms in Flask

Question

In my page I have two different forms. I want to read the information from the first form whenever I press a button in the second form. Is this possible? First form:

<form id="loadData" method="post" action="/loadData">
    {% if day %}
        Day: <input id="day" name="day" size="5px" value={{day}}>
        Month: <input id="month" name="month" size="5px" value={{month}}>
        Year: <input id="year" name="year" size="5px" value={{year}}>
    {% else %}
        Day: <input id="day" name="day" size="5px">
        Month: <input id="month" name="month" size="5px">
        Year: <input id="year" name="year" size="5px">
    {% endif %}
.
.
.
</form>

Second form:

<form id="createFile" method="post" action="/createFile">
    <button type="submit">Create</button>
</form>

By clicking the button in the second form I want to read the information in the first one to create a file containing all those information. I tried something like

@app.route("/createFile", methods=["GET", "POST"])
def createFile():
    if request.method == "POST":
        day = request.form["day"]
        month = request.form["month"]
        year = request.form["year"]
    return redirect('/')

but I can't manage to read those variable properly.

cool. try looking at [JavaScript post request like a form submit](https://stackoverflow.com/a/133997/4935162), [get form data with JavaScript](https://stackoverflow.com/a/67233236/4935162) and [submit a form with JavaScript](https://stackoverflow.com/a/6799546/4935162). what is probably happening is that your'e sending (and therefore reading) the 2nd form's data. (which is... empty, it has no inputs). (by the way, do you _have_ to use two forms? why not one?) — Yarin_007, Oct 25 '22 at 10:48
@Yarin_007 in the first form I have another button that calls the loadData (in my app.py), but I can't find a way to handle two function (on different buttons) in the same form — Alessandro Chiodo, Oct 25 '22 at 11:42
Two buttons with different actions on one form https://stackoverflow.com/q/547821/10548137 — EAW, Oct 25 '22 at 17:03

score 0 · Answer 1 · answered Oct 25 '22 at 12:44

Despite corresponding in the comments i'm not entirely sure this is your end goal, but let's give it a go?

basically all i did was copy stuff from the links attached in the comment.

a.html:

<form id="form_id" action="/loadData" method="POST">
    <input type="text" name="q" value="abcd">
    <button type="submit">loadData</button>

</form>
<button id="createFile"> createFile </button>



<script>

    function post(path, params, method = 'post') {

        // The rest of this code assumes you are not using a library.
        // It can be made less verbose if you use one.
        const form = document.createElement('form');
        form.method = method;
        form.action = path;

        for (const key in params) {
            if (params.hasOwnProperty(key)) {
                const hiddenField = document.createElement('input');
                hiddenField.type = 'hidden';
                hiddenField.name = key;
                hiddenField.value = params[key];

                form.appendChild(hiddenField);
            }
        }
        document.body.appendChild(form);
        form.submit();
    }

    var form_1 = document.querySelector('#form_id')
    document.querySelector('#createFile').addEventListener('click', (e) => {
        var data = Object.fromEntries(new FormData(form_1).entries());
        post("/createFile",data)
    });


</script>

app.py:

from crypt import methods
from flask import Flask, request
app = Flask(__name__)


@app.route("/loadData", methods=["POST"])
def loadData():
    data = request.get_data()
    return f"<h1 style='color:blue'>loadData data: {data}</h1>"


@app.route("/createFile", methods=["POST"])
def createFile():
    data = request.get_data()
    return f"<h1 style='color:red'>createFile data: {data}</h1>"


if __name__ == "__main__":
    app.run(host='0.0.0.0')

page looks like this:

clicking on loadData:

clicking on createFile:

this whole setup is pretty convoluted and unnecessarily complex. what are you trying to achieve?

Thanks! I'll give it a try asap. This is my first time coding a web app so I'm pretty sure I need some time to learn the best solutions to solve certain problems. What I am trying to achieve is pretty long to explain. If I find some difficulties can I feel free to recomment this post to contact you? — Alessandro Chiodo, Oct 25 '22 at 13:16
you're welcome! definitely comment here with any further questions. a good thing to keep in mind is the [x/y problem](https://meta.stackexchange.com/a/233676). — Yarin_007, Oct 25 '22 at 13:49

Read from two different forms in Flask

1 Answers1