Estoy tratando de que todos los enlaces dentro de un formulario de matraz funcionen correctamente:

Si presiono un enlace normal <a href="/"></a>, mi formulario actúa como si hubiera presionado el botón de enviar. Para una mejor comprensión, aquí una explicación, lo que quiero exactamente:
Si llamo a station_form.html a través de un matraz, obtengo mi formulario de entrada con entradas precargadas. Estas entradas se pueden cambiar. Si presiono Back o Upload, llama a mod_station. Esto no debería suceder.
GIF: ejemplo de mi problema: debería permitirme cargar un archivo. La ventana de carga de archivos se abre en segundo plano, pero el matraz no permanece en esta página.

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)

Traté de reducir el código ya. Espero que puedas decirme dónde está mi error. Gracias.

1
p4cx 22 sep. 2019 a las 22:18

1 respuesta

La mejor respuesta

El elemento <button> envía el formulario de forma predeterminada. Para evitar que envíe formularios, debe establecer su tipo explícitamente en type="button".

Sus elementos a contienen botones sin tipo, así que agregue tipo para ellos, p. Ej.

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

Puede leer más sobre el comportamiento del elemento de botón en su especificación w3

1
stasiekz 22 sep. 2019 a las 19:30