python flask 形式的所有链接都像提交一样
All links in python flask form behave like submit
我正在尝试让烧瓶中的所有 link 正常工作:
如果我按正常 link <a href="/"></a>
,我的表单就像按下提交按钮一样。为了更好地理解,这里有一个解释,我到底想要什么:
如果我通过 flask 调用 station_form.html
,我会得到带有预填输入的输入表单。这些输入是可以改变的。如果我按 Back
或 Upload
,它会调用 mod_station
。这不应该发生。
GIF-Example of my problem - it should let me upload a file. The file upload windows opens in the background, but flask don't stay on this page.
station_form.html
<form action="{{ url_for('mod_station', old_station=form.station_name.data) }}" enctype="multipart/form-data" method="post">
<fieldset>
<legend>Modify {{ form.station_name.data }}</legend>
<div class="row responsive-label label_center spacer_20">
<div class="col-sm-12 col-md-3 row_title">{{ form.station_name.label }}</div>
<div class="col-sm-12 col-md">{{ form.station_name }}</div>
</div>
<div class="row responsive-label label_center spacer_20">
<div class="col-sm-12 col-md-3 tooltip row_title" aria-label="Only a *.png file.">{{ form.station_cover.label }}</div>
<div class="col-sm-12 col-md">
<div class="upload_wrapper">
<button class="secondary button_fix">{{ form.station_cover }}Upload cover</button>
</div>
</div>
</div>
<div class="row responsive-label label_center">
<div class="col-sm-6 col-md-3"><a href="/"><button class="secondary large">Back</button></a></div>
<div class="col-sm-0 col-md-6"></div>
<div class="col-sm-6 col-md-3">
{{ form.submit(class="tertiary large add_station_submit", value="Modify station") }}
</div>
</div>
</fieldset>
</form>
forms.py
class AddStationForm(FlaskForm):
station_name = StringField('Station name', validators=[DataRequired()])
station_cover = FileField('Cover', validators=[FileAllowed(['png'], '*.png only!')])
submit = SubmitField('Add station')
main.py
@app.route("/station_form")
def station_form(station=None):
form_station = AddStationForm()
if station is not None:
form_station.station_name.data = station[1]
countries = helpers.load_country_choices()
success = False
return render_template('station_form.html', form=form_station, countries=countries)
@app.route('/mod_station/<string:old_station>', methods=['POST'])
def mod_station(old_station):
if request.method == 'POST':
old_name = old_station
if 'station_cover' in request.files:
file = request.files['station_cover']
if file.filename != '' and file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(TEMP_PATH, filename))
success, message, station = station_model.modify_station(request.form, os.path.join(TEMP_PATH, filename), old_name)
return render_template('report.html', success=success, message=message, station=station)
filename = request.form['station_name'] + ".png"
old_file = os.path.join(THUMBS_PATH, old_name + ".png")
new_file = os.path.join(THUMBS_PATH, filename)
os.rename(old_file, new_file)
success, message, station = station_model.modify_station(request.form, filename, old_name)
return render_template('report.html', success=success, message=message, station=station)
我已经尝试减少代码了。希望你能告诉我,我的错误在哪里。谢谢。
<button>
元素默认提交表单。要阻止它提交表单,您必须将其类型显式设置为 type="button"
.
您的 a
元素包含没有类型的按钮,因此请为它们添加类型,例如
<button class="secondary button_fix" type="button">{{ form.station_cover }}Upload cover</button>
您可以在 w3 specification
中阅读有关按钮元素行为的更多信息
我正在尝试让烧瓶中的所有 link 正常工作:
如果我按正常 link <a href="/"></a>
,我的表单就像按下提交按钮一样。为了更好地理解,这里有一个解释,我到底想要什么:
如果我通过 flask 调用 station_form.html
,我会得到带有预填输入的输入表单。这些输入是可以改变的。如果我按 Back
或 Upload
,它会调用 mod_station
。这不应该发生。
GIF-Example of my problem - it should let me upload a file. The file upload windows opens in the background, but flask don't stay on this page.
station_form.html
<form action="{{ url_for('mod_station', old_station=form.station_name.data) }}" enctype="multipart/form-data" method="post">
<fieldset>
<legend>Modify {{ form.station_name.data }}</legend>
<div class="row responsive-label label_center spacer_20">
<div class="col-sm-12 col-md-3 row_title">{{ form.station_name.label }}</div>
<div class="col-sm-12 col-md">{{ form.station_name }}</div>
</div>
<div class="row responsive-label label_center spacer_20">
<div class="col-sm-12 col-md-3 tooltip row_title" aria-label="Only a *.png file.">{{ form.station_cover.label }}</div>
<div class="col-sm-12 col-md">
<div class="upload_wrapper">
<button class="secondary button_fix">{{ form.station_cover }}Upload cover</button>
</div>
</div>
</div>
<div class="row responsive-label label_center">
<div class="col-sm-6 col-md-3"><a href="/"><button class="secondary large">Back</button></a></div>
<div class="col-sm-0 col-md-6"></div>
<div class="col-sm-6 col-md-3">
{{ form.submit(class="tertiary large add_station_submit", value="Modify station") }}
</div>
</div>
</fieldset>
</form>
forms.py
class AddStationForm(FlaskForm):
station_name = StringField('Station name', validators=[DataRequired()])
station_cover = FileField('Cover', validators=[FileAllowed(['png'], '*.png only!')])
submit = SubmitField('Add station')
main.py
@app.route("/station_form")
def station_form(station=None):
form_station = AddStationForm()
if station is not None:
form_station.station_name.data = station[1]
countries = helpers.load_country_choices()
success = False
return render_template('station_form.html', form=form_station, countries=countries)
@app.route('/mod_station/<string:old_station>', methods=['POST'])
def mod_station(old_station):
if request.method == 'POST':
old_name = old_station
if 'station_cover' in request.files:
file = request.files['station_cover']
if file.filename != '' and file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(TEMP_PATH, filename))
success, message, station = station_model.modify_station(request.form, os.path.join(TEMP_PATH, filename), old_name)
return render_template('report.html', success=success, message=message, station=station)
filename = request.form['station_name'] + ".png"
old_file = os.path.join(THUMBS_PATH, old_name + ".png")
new_file = os.path.join(THUMBS_PATH, filename)
os.rename(old_file, new_file)
success, message, station = station_model.modify_station(request.form, filename, old_name)
return render_template('report.html', success=success, message=message, station=station)
我已经尝试减少代码了。希望你能告诉我,我的错误在哪里。谢谢。
<button>
元素默认提交表单。要阻止它提交表单,您必须将其类型显式设置为 type="button"
.
您的 a
元素包含没有类型的按钮,因此请为它们添加类型,例如
<button class="secondary button_fix" type="button">{{ form.station_cover }}Upload cover</button>
您可以在 w3 specification
中阅读有关按钮元素行为的更多信息