Flask HTML Use button as input

Question

Context

I'm trying to find out how can I use the button in my page as an action to a function in my app.py with its respective value.

Currently I have this code as my app.py

@app.route('/')
def home():
    return render_template('home.html')

# For web app
@app.route('/search', methods=['POST'])
def search():
    user_input = [str(i) for i in request.form.values()]
    book_rec = search_result(user_input[0],search_define)

    return render_template('home.html',data=book_rec)

Which yields something like this if you fill the input form and click Find. I want to make the Recommendation button clickable and will trigger and action in my app.py

Current Code

I generate the cards in the above picture with this html script, this is also my current html script I want to modify the button or form part. And as you can see, data is just a python dictionary.

    <center>
        <div class="row">
        {% for i in data %}
            <div class="column">
                <div class="card">
                    <img src="{{data[i]['image_url_s']}}" class="card-img-top" alt="...">
                    <h2 style="color: #000000;">{{data[i]['book_title']}}</h2>
                    <p style="color: #000000;">{{data[i]['book_author']}}</p>
                    <p style="color: #000000;">{{data[i]['year_of_publication']}}</p>
                    <form action="{{ url_for('rec')}}" method="post">
                        <button type="submit" class="button btn-primary btn-block btn-large"><strong>Recommendation</strong></button>
                    </form>
                </div>
            </div>
        {% endfor %}
    </center>

Now I'm trying to connect the Recommendation button to this part of lines in my app.py

@app.route('/rec')
def rec():
    #Use the {{data[i]['isbn_index']}} value from respective `Recommendation` button as an input
    #Do something
    #return something

Question

How should I setup my form or button in the HTML script so I can trigger /rec when I click on the Recommendation and use the respective isbn_index value as input?

flask.palletsprojects.com/en/2.2.x/quickstart/…

2e0byo
– 2e0byo

2022-09-22 10:20:10 +00:00
Commented Sep 22, 2022 at 10:20 — 2e0byo
– 2e0byo, Commented Sep 22, 2022 at 10:20

Andrew Clark · Accepted Answer · 2022-09-22 15:49:48Z

2

Inside the jinja for loop, you can use your index of loop or the value of 'i' to create a distinctive name for your button element. For example,

<button type="submit" class="button btn-primary btn-block btn-large" name="button_{{i}}"><strong>Recommendation</strong></button>

and then in your route, you can create conditional statements to look for each button, if it was pressed; do something different.

if request.method == "POST":
    for i in data:
        button_name = f'button_{i}'
        if button_name in request.form:
            # do something interesting
            print(f'I pressed this button: {button_name}')

answered Sep 22, 2022 at 15:49

Andrew Clark

8807 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flask HTML Use button as input

Context

Current Code

Question

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Context

Current Code

Question

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related