flask multiple submit button

Viewed 11048

I am using flask and jinja2 to create a simple web app to serve up a simple sklearn algorithm for predictions.

In my html I need to get 4 variables: client id, textid, textid1, textid2

It currently works when I have it all connected to one submit button. But I would like to have two submit buttons to have the client id submit at the top of the page and the textid stuff at the bottom of the page. When I try to have two submit buttons it causes the page to refresh and I not able to connect the client id to the 3 textid vars.

    <div class="col">
        <div class="form-group">
        <label>Enter Customer ID or leave blank for random selection </label>
         <form method="POST">
            <input name="text", id='text', placeholder="Client ID #", value="{{ client_id|round|int }}" >
            <br>
            <label>Enter 3 suggestions</label>
            <br>
            <input name="textid", placeholder="Suggested Model ID #", value="{{ request.form['textid'] }}"/>
            <input name="textid1", placeholder="Suggested Model ID #", value="{{ request.form['textid1'] }}"/>
            <input name="textid2", placeholder="Suggested Model ID #", value="{{ request.form['textid2'] }}"/>

            <input type="submit" >
          </form>
      </div>

I'm simply grabbing it in flask like this:

@app.route('/suggestion', methods=['GET', 'POST'])
def with_suggestions():

try:
    client_id=request.form['text']

except:
#custom function when client id is not entered to get random one
    client_id = recommender.random_client_id()
try:
    model_id=request.form['textid']
    model_id1=request.form['textid1']
    model_id2=request.form['textid2']
#other functional code after this

How can I break up the html to get two submit buttons? Thanks!!

3 Answers

Now that you have updated your code, all you need to do is add hidden inputs to identify where the click was originated from. Also Remove the leading slash from your url_for like I did below

<div class="col">
<div class="form-group">
<label>Enter Customer ID or leave blank for random selection </label>

<form method="POST" action={{url_for('suggestion')}}>
    <input name="text", id='text', placeholder="Client ID" >
    <input type="hidden" name="btn_identifier" value="client_id_identifier" />
    <input type="submit" >
</form>
<form method="POST" action={{url_for('suggestion')}}>
    <input name="textid", id='text', placeholder="Textid1">
    <input name="textid1", id='text', placeholder="textid2  ">
    <input name="textid2", id='text', placeholder="Textid3">
    <input type="hidden" name="btn_identifier" value="text_id_identifier" />
    <input type="submit" value="Submit">
</form>

main.py

from flask import Flask
from flask import render_template, url_for, request, redirect
app = Flask(__name__)

@app.route('/suggestion', methods=['GET', 'POST'])
def with_suggestions():
    if request.methods == 'POST':
        if request.form['btn_identifier'] == 'client_id_btn':
            try:
                client_id=request.form['text']
            except:
                # I think this would go in the second elif statement
                model_id=request.form['textid']
                model_id1=request.form['textid1']
                model_id2=request.form['textid2']
        elif request.form['btn_identifer'] == 'text_id_btn':
            # run some code to handle a click that was originated from the second button
    return render_template('index.html')        

if __name__ == '__main__':
    app.run()

I made some changes to your code.

index.html

<div class="col">
    <div class="form-group">
    <label>Enter Customer ID or leave blank for random selection </label>

    <form method="POST" action={{url_for('suggestion')}}>
        <input name="text", id='text', placeholder="Client ID" >
        <input type="submit" >
    </form>
    <form method="POST" action={{url_for('suggestion')}}>
        <input name="textid", id='text', placeholder="Textid1">
        <input name="textid1", id='text', placeholder="textid2  ">
        <input name="textid2", id='text', placeholder="Textid3">
        <input type="submit" value="Submit">
    </form>
  </div>

main.py

from flask import Flask
from flask import render_template, url_for, request, redirect
app = Flask(__name__)

@app.route('/suggestion', methods=['GET', 'POST'])
def suggestion():
    if request.method == 'POST':
        try:
            client_id=request.form['text']
        except:
            model_id=request.form['textid']
            model_id1=request.form['textid1']
            model_id2=request.form['textid2']
    return render_template('index.html')        

if __name__ == '__main__':
    app.run()

Note: Values are store in the variable, print to see

I have simplified the process of fetching the info from multiple buttons. Do note that you require the python flask framework for the "request" method.

home.html

<div class="container mt-5">
    <div class="row col-4">
        <form method="POST" class="form-register">

            <input type="submit" name="submit_button" value="Add Email">
            <input type="submit" name="submit_button" value="Clear Recipients">
        </form>
    </div>
</div>

run.py

if request.method == 'POST':
        if request.form['submit_button'] == 'Add Email':
            print("add email")
        
        elif request.form['submit_button'] == 'Clear Recipients':
            print("clear recipients")

you may refer to the link provided for more example

https://www.codegrepper.com/code-examples/python/checking+if+button+pressed+flask

Related