Home > Software engineering >  How to create multiple Submit buttons with Flask forms?
How to create multiple Submit buttons with Flask forms?

Time:12-21

Problem : I want to do the whole thing with the Form_Setting class in the forms.py file. Here I have defined the 4 submit buttons. I then use the buttons in the settings.html. In the routes.py file I want to react when they are pressed. However, at the moment it is still so that I can react with form.validate_on_submit() only generally on the submit. How can I distinguish which of the submit buttons were pressed to then perform different actions?

routes.py

from page import app
from flask import render_template, redirect, url_for
from page.models import Settings
from page.forms import Form_Setting
from page import db



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

    form = Form_Setting()

    if form.validate_on_submit():
      save_email =  Settings(email_adress=form.email_adress.data) 
      db.session.add(save_email)
      db.session.commit()
      return redirect(url_for('Settings_Page'))
    
    return render_template('settings.html',form=form)

forms.py

from flask_wtf import FlaskForm 
from wtforms import StringField, SubmitField

class Form_Setting(FlaskForm):
    email_adress = StringField(label='Email')
    dooralarm_time = StringField(label='Türalarm')
    minimum_temp = StringField(label='MinTemp')
    maximum_temp = SubmitField(label='MaxTemp')


    submit_email = SubmitField(label='Eingabe')
    submit_door = SubmitField(label='Eingabe')
    submit_temp_max = SubmitField(label='Eingabe')
    submit_temp_min = SubmitField(label='Eingabe')

settings.html

{%extends 'base.html' %}

{% block ActivSettings%}
    active
{% endblock %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/style.css')}}"/>
{% endblock %}


{% block title %}
    Einstellungen
{% endblock %}

{% block content %}
    <div>
        <div >
            <h1 >Einstellungen</h1>
            <!--Email Adresse-->
            <div >  
                <div >
                    <div  style="height: 8vh;"> 
                        <div >
                            <h3 >E-mail</h3>
                        </div>

                        <div >
                            <form  method="POST"  >
                                <!--Schutz gegen CSRF-->
                                {{ form.hidden_tag() }}
                                {{ form.email_adress(, placeholder="E-Mail") }}
                                {{ form.submit_email(, style="background-color: #6941c6; border:none; color: #f9f5ff; margin-left: 1vw;" )}}
                            </form>
                        </div>
                    </div>
                    <hr >
                </div>  
            </div>

            <!--Türalarm Zeitintervall-->
            <div >  
                <div >
                    <div  style="height: 8vh;"> 
                        <div >
                            <h3 >Türalarm Zeitintervall</h3>
                        </div>

                        <div >
                            <form  method="POST"  >
                                <!--Schutz gegen CSRF-->
                                {{ form.hidden_tag() }}
                                {{ form.dooralarm_time(, placeholder="Zeitintervall") }}
                                {{ form.submit_door(, style="background-color: #6941c6; border:none; color: #f9f5ff; margin-left: 1vw;" )}}
                            </form>
                        </div>
                    </div>
                    <hr >
                </div>  
            </div>

            <!--Temp. Schwellwert Minimal-->
            <div >  
                <div >
                    <div  style="height: 8vh;"> 
                        <div >
                            <h3 >Temp. Schwellwert Minimal</h3>
                        </div>

                        <div >
                            <form  method="POST"  >
                                <!--Schutz gegen CSRF-->
                                {{ form.hidden_tag() }}
                                {{ form.dooralarm_time(, placeholder="Temp. Minimal") }}
                                {{ form.submit_temp_max(, style="background-color: #6941c6; border:none; color: #f9f5ff; margin-left: 1vw;" )}}                      
                            </form>
                        </div>
                    </div>
                    <hr >
                </div>  
            </div>

            <!--Temp. Schwellwert Maximal-->
            <div >  
                <div >
                    <div  style="height: 8vh;"> 
                        <div >
                            <h3 >Temp. Schwellwert Maximal</h3>
                        </div>

                        <div >
                            <form  method="POST"  >
                                <!--Schutz gegen CSRF-->
                                {{ form.hidden_tag() }}
                                {{ form.dooralarm_time(, placeholder="Temp. Maximal") }}
                                {{ form.submit_temp_min(, style="background-color: #6941c6; border:none; color: #f9f5ff; margin-left: 1vw;" )}}                                                
                            </form>
                        </div>
                    </div>
                    <hr >
                </div>  
            </div>
            
        </div>
    </div>
    
{% endblock %}

Webseite The result for the page

CodePudding user response:

You can iterate through request.form using the variable name of the submit button.

from flask import request

if 'submit_email' in request.form:
    # do something
elif 'submit_door' in request.form:
    # do something

Be sure that the form will still validate properly form.validate_on_submit()

  • Related