1

mi intención es sacar el valor de dos selects localizados en un form en la página html para cargar dichos archivos y mostrar la elección en otra ruta. El caso es que soy bastante novato y ando perdido con la forma de trabajar de flask.

El código del archivo python es el siguiente:

import os
from flask import Flask, render_template, url_for, request
from flask_bootstrap import Bootstrap
from werkzeug.utils import redirect

app = Flask(__name__)
Bootstrap(app)


@app.route('/', methods=['GET', 'POST'])
def index():
    listConfig = os.listdir('configVariables')
    listSim = os.listdir('SimData')
    return render_template('index.html', listConfig=listConfig, listSim=listSim)



@app.route('/data', methods=['GET', 'POST'])
def data():
    return render_template('data.html')


@app.route('/showData/<sim>/<config>', methods=['GET', 'POST'])
def showData(sim, config):
    return redirect(url_for('data', sim, config))


def submit():
    if request.method == "POST":
        if request.form.get("showData"):
            return redirect(url_for('data'))
        elif request.method == "GET":
            return redirect(url_for('data'))


if __name__ == "__main__":
    app.run(debug=True)

Por otro lado, el html de index es el siguiente:

{% extends "base.html" %}
{% block title %} Elección{% endblock %}
{% block content %}
<div class="title">
    <h1 id="titulo">2 Opciones archivo</h1>
</div>
<div class="description">
    <h3>Escoge las opciones</h3>
</div>
<div class="selectSim">
    <span> Opción 1</span>
    <select onchange="elSim(this)" id="sim" class="form-select form-select-lg mb-3 show-tick"
            aria-label=".form-select-lg example" name="listSim" method="POST"
            action="{{ url_for('data') }}">
        {% for file in listSim %}
        <option name=sim value="{{simName}}" SELECTED>{{file}}</option>
        {% endfor %}
    </select>
    <form id="formSim" method="post" action="/data">
        <button type="submit" class="btn btn-dark btn-lg" name="showData" value="showData">Simular
        </button>
    </form>
</div>
<div class="selectConfig">
    <span> Elige la opción 2</span>
    <select onchange="elVariable(this)" id="variable" class="form-select form-select-lg mb-3 "
            aria-label=".form-select-lg example" name="listConfig"
            method="POST"
            action="/">
        {% for file in listConfig %}
        <option name=config value="{{configName}}" SELECTED>{{file}}</option>
        {% endfor %}
    </select>
    <form id="formConfig" method="post" action="/data">
        <button type="submit" class="btn btn-dark btn-lg" name="showData" value="showData">Acción 2
        </button>
    </form>
</div>
{% endblock %}

Y por último el html donde querría mostrar los archivos que se han seleccionado:

{% extends "base.html" %}
{% block title %}Archivos escogidos{% endblock %}
{% block content %}
<div class="primary">
    <div class="title">
        <h1>Muestra archivos</h1>
    </div>
    <div class="description">
        <h3>Muestra de los datos seleccionados:</h3>
        <p>{{sim}}</p>
        <p>{{config}}</p>
    </div>
</div>

{% endblock %}

Le he dado varias vueltas y al final me he acabado embolicando. Seguramente la opción sea la hostia de fácil peero, no he encontrado la solución tampoco buscando preguntas relacionadas. Debería sacar ese valor con el evento onChange pero...como pasarlo mediante la ruta a otro template?. Un poco de ayuda please?.

1 respuesta 1

1

Tienes un pequeño lío de conceptos. Lo primero aclarar el flujo de los datos (esto no es cosa específica de Flask o Python, sino del propio protocolo HTTP).

Entiendo que el flujo de operaciones debería ser el siguiente (y sobre él voy añadiendo entre paréntesis qué es lo que se transportaría en el protocolo HTTP)

  1. El usuario accede a la página principal (el navegador hace un GET a la ruta / y el servidor devuelve index.html, el cual contiene un formulario con diferentes campos, entre ellos un par de desplegables)
  2. El usuario elige en cada uno de los desplegables una de las opciones, y después pulsa el botón "Enviar" (el navegador hace un POST a la ruta indicada en el formulario, que digamos que es /data. Como parte del POST incluirá en el cuerpo los valores elegidos por el usuario en el formulario)
  3. (El servidor recibe un POST a la ruta /data y en ella vienen los valores del formulario, los extrae y los usa para componer un resultado, que es lo que se envía al usuario como respuesta al POST) El usuario ve en pantalla un resultado que depende de la elección que hubiera hecho en el paso anterior.

Por tanto vemos que en el lado servidor sólo hacen falta dos rutas:

  1. La ruta raiz / a la que se hará un GET y deberá responder con el formulario
  2. La ruta /data a la que se hará un POST y deberá responder con el resultado

La ruta /showData/<sim>/<config> que habías programado no es necesaria, pues esa sería si se realizara un GET que especificara como parte de la ruta los parámetros, pero hemos visto que en el caso de los formularios esto no es así. Los parámetros van en el cuerpo del mensaje y no en la ruta.

Así pues nos quedan por resolver las siguientes cuestiones:

  1. ¿Cómo escribir en HTML el formulario adecuadamente para que el usuario pueda elegir una opción y pulsar un botón para enviarla?
  2. ¿Cómo se obtiene desde la función que responde al POST /data los valores que el usuario haya puesto en el formulario?

Respondamos a estas cuestiones.

Creación del formulario

El index.html que usas tiene demasiadas etiquetas <form>, lo que daría lugar a múltiples formularios que no son necesarios (serían necesarios si cada uno tuviera su propio botón "submit" y cada uno tuviera que hacer un POST a una ruta diferente).

Así que empecemos por reescribir ese index.html para que tenga una sola etiqueta <form> dentro de la cual estén todos los campos a rellenar (listas desplegables). Es en esa etiqueta form donde se especificará a qué ruta debe hacerse el POST.

Por otro lado, en los desplegables sobra todo ese javascript que habías añadido. En cambio hace falta que cada lista desplegable tenga un name ya que será a través de ese name como se podrá acceder después a los valores en el lado servidor.

El nuevo index.html queda así:

{% extends "base.html" %}
{% block title %} Elección{% endblock %}
{% block content %}
<div class="title">
    <h1 id="titulo">2 Opciones archivo</h1>
</div>
<div class="description">
    <h3>Escoge las opciones</h3>
</div>
<form method="post" action="/data">
  <div class="selectSim">
    <span> Opción 1</span>
    <select name="sim">
        {% for file in listSim %}
        <option name=sim value="{{file}}" SELECTED>{{file}}</option>
        {% endfor %}
    </select>
  </div>
  <div class="selectConfig">
    <span> Elige la opción 2</span>
    <select name="config">
        {% for file in listConfig %}
        <option name=config value="{{file}}" SELECTED>{{file}}</option>
        {% endfor %}
    </select>
  </div>
  <div class="button">
  <button type="submit" class="btn btn-dark btn-lg">Enviar</button>  
  </div>
</form>
{% endblock %}

Diferencias con el tuyo:

  • Un solo bloque <form> especificando un POST a /data
  • Simplificación de la etiqueta <select> quitando el javascript de onChange() (no queremos enviar nada cuando cambie la opción, sino cuando pulse el botón)
  • El valor de cada opción se toma de {{file}}, para que coincida el valor de la opción con lo que se muestra al usuario. Por otro lado esa es la variable del bucle y no simName o configName como tú tenías, que de hecho son variables no definidas.
  • Eliminado uno de los botones. Basta uno solo pues solo cuando se pulse ese botón se enviará el formulario completo, con ambas opciones.

El nuevo formulario se ve así (no tengo tu css, no he aplicado ningún estilo)

Formulario

(En mi caso, para hacer pruebas, creé dentro de la carpeta simData tres ficheros llamados "uno", "dos" y "tres", y dentro de la carpeta configVariables otros tres ficheros llamados "a", "b" y "c". Por eso aparecen esos valores en los desplegables)

Programación del backend (servidor)

Cuando el usuario pulse el botón "Enviar" en ese formulario, se hará un POST a la url /data. Hay que programar la función que reciba ese POST. Esta función debe:

  • Extraer del cuerpo del mensaje el formulario, y de él los valores deseados
  • Renderizar el template "data.html" pasándole los valores que ha sacado del formulario.

La función sería la siguiente:

@app.route('/data', methods=['POST'])
def data():
  data = {
    "sim": request.form.get("sim"),
    "cfg": request.form.get("config")
  }
  print(data)
  return render_template("data.html", **data)

Comentarios:

  • Ya que la función sólo responderá al POST, no hay por qué poner GET también en la lista de métodos
  • El acceso a los datos del formulario enviados por el cliente se hace mediante request.form como puedes ver. Mediante get se obtiene el valor de un campo del formulario. En este caso los campos que nos interesan se llaman "sim" y "config" y son los valores que pusimos en el HTML, en el atributo name= de la etiqueta <select>
  • Esos valores se pasan al template.

En el template data.html he cambiado el nombre de la variable config por cfg para evitar confusión, pues config es otra variable usada por jinja, por lo que queda así:

{% extends "base.html" %}
{% block title %}Archivos escogidos{% endblock %}
{% block content %}
<div class="primary">
    <div class="title">
        <h1>Muestra archivos</h1>
    </div>
    <div class="description">
        <h3>Muestra de los datos seleccionados:</h3>
        <p>{{sim}}</p>
        <p>{{cfg}}</p>
    </div>
</div>
{% endblock %}

Y lo que verá el usuario en respuesta al formulario será en este caso:

Resultado

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.