Все ссылки в форме фляги Python ведут себя как отправить - PullRequest
Новая
       9

Все ссылки в форме фляги Python ведут себя как отправить

1 голос
/ 22 сентября 2019

Я пытаюсь заставить все ссылки внутри формы фляги работать должным образом:

Если я нажимаю обычную ссылку <a href="/"></a>, моя форма действует так, как если бы я нажал кнопку отправки.Для лучшего понимания, вот объяснение, что я точно хочу:
Если я позвоню station_form.html через колбу, я получу свою форму ввода с предварительно заполненными вводами.Эти входные данные могут быть изменены.Если я нажимаю Back или Upload, он вызывает mod_station.Этого не должно быть.
GIF-пример моей проблемы - он должен позволить мне загрузить файл.Окна загрузки файлов открываются в фоновом режиме, но колба не остается на этой странице.

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>

формы.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)

Я уже пытался уменьшить код.Надеюсь, вы можете сказать мне, где моя ошибка.Спасибо.

1 Ответ

1 голос
/ 22 сентября 2019
Элемент

<button> отправляет форму по умолчанию.Чтобы запретить отправку формы, вы должны явно установить ее тип на type="button".

Ваши a элементы содержат кнопки без типа, поэтому добавьте тип для них, например 

<button class="secondary button_fix" type="button">{{ form.station_cover }}Upload cover</button>

Вы можетеУзнайте больше о поведении элемента кнопки в его спецификации w3

...