Flask: Implementación de WTForms Select2 para capturar resultados seleccionados desde AJAX.

02 Aug, 2023 Programación 0

Mi pregunta es bastante directa,

Tengo una implementación de Select2 Ajax funcionando en mi HTML, ¿cómo capturo el resultado en un WTForm?

Aquí está mi HTML y mi pregunta gira en torno a cómo agregar las etiquetas WTForm en la clase html de select2 para poder capturar el resultado.

                <form method="POST">
                    <div class="row mb-5">
                                <label for="exampleInputIconRight">Buscar Nombre</label>
                                    <select class="form"></select>

Aquí está mi backend en Python

from app.forms import (NameForm)

@route('/form-page.html', methods=['GET', 'POST'])
def form_page():
    form = NameForm(request.form)

form.name.data = None
if request.method == "POST":
    name = request.form['name']

forms.py

class NameForm(FlaskForm):
    name = TextField()

Mi principal duda es la siguiente, si estuviera usando un WTForms normal, simplemente llamaría al objeto que pasé en el backend y recuperaría los datos ingresados.

En el HTML tendría que escribir algo como esto:

{{ form.name(class="form-control")}}

Es solo la implementación en el HTML de lo que no estoy seguro… ¿Dónde debo agregar la etiqueta? ¿Algo como esto?

                <form method="POST">
                    <div class="row mb-5">
                                <label {{="" form.name="" }}="" for="exampleInputIconRight">Buscar Nombre</label>
                                    <select class="form"></select>

Realmente no estoy seguro de cómo proceder para que mi formulario reciba los datos de Select2.

Note: The code and output in markdown were not translated as requested

from flask_select2 import Select2Field from wtforms.validators import DataRequired class NameForm(FlaskForm): name = Select2Field('Buscar Nombre', validators=[DataRequired()], choices=[], render_kw={"multiple": False, "class": "form-control"})

{% from "select2/wtform.html" import render_field %} <form method="POST"> <div class="row mb-5"> {{ render_field(form.name) }} </div> <input type="submit" value="Enviar"> </form>

@route('/form-page.html', methods=['GET', 'POST']) def form_page(): form = NameForm(request.form) if form.validate_on_submit(): name = form.name.data # hacer algo con el nombre seleccionado return render_template('form-page.html', form=form)

Answer

davy.ai

August 2, 2023 at 4:28 am
Para capturar el resultado de una implementación de Ajax de Select2 en un WTForm, es necesario agregar las etiquetas de WTForm al elemento select del HTML. Esto se puede hacer con la ayuda de las extensiones Flask-Select2 y Flask-wtf.

Primero, necesitas instalar estas extensiones con los siguientes comandos:
```
pip install Flask-Select2 Flask-wtf
```
Luego, puedes crear un Select2Field en tu WTForm de la siguiente manera:
```
from flask_select2 import Select2Field
from wtforms.validators import DataRequired

class NameForm(FlaskForm):
    name = Select2Field('Buscar Nombre', validators=[DataRequired()], choices=[],
            render_kw={"multiple": False, "class": "form-control"})
```
En tu HTML, puedes usar el Select2Field de la siguiente manera:
```
{% from "select2/wtform.html" import render_field %}

<form method="POST">
    <div class="row mb-5">
        {{ render_field(form.name) }}
    </div>
    <input type="submit" value="Enviar">
</form>
```
Esto renderizará el campo desplegable de Select2 con las etiquetas de WTForm necesarias para capturar el resultado.

En tu código backend, luego puedes recuperar el valor seleccionado por el usuario de la siguiente manera:
```
@route('/form-page.html', methods=['GET', 'POST'])
def form_page():
    form = NameForm(request.form)
    if form.validate_on_submit():
        name = form.name.data
        # hacer algo con el nombre seleccionado
    return render_template('form-page.html', form=form)
```
Nota: Asegúrate de incluir los archivos JavaScript y CSS necesarios para Select2 en tu HTML.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Flask: Implementación de WTForms Select2 para capturar resultados seleccionados desde AJAX.

Answer

davy.ai