How do i make multiple checkbox with a unique id using WTForms so that i can store it in shelves?

问题

How can I make multiple checkbox using WTForms and render it to my html page? This is what i've come up with using WTForms but i was told that by using Boolean(True,False) it will only applies to only one checkbox instead of multiple checkbox.And how can i append the selected check-boxes into a dictionary with a unique ID given to it?

Im quite new to python,flask and WTForms. Thank you for taking your time to help me out. It is also fine to give me some suggestions/guides to help me work on it.

A preview of my HTML doctor booking page

 

   {% extends 'layout.html' %}
    {% block body %}

 

    <link rel="stylesheet" type="text/css" href="/static/css/appointment.css">
    <div class="jumbotron">
      <div class="container text-center">
          <div id="head">
       <h1>{{ title }}</h1>
              </div>

        <div id="head-p"> <p> Doctor Opening Hours Slot  </p> </div>

      </div>
    </div>



      <div class="panel-group">
        <div class="panel panel-default">
          <div class="panel-heading"> <h3> Doctor Admin Page </h3> </div>
        <div id="appointment_box">


        </div>


        <form>
        <table class="table table-bordered">
            <thead>
            <tr>
                    <th> Monday  </th>
                    <td id="m1" style="background-color:lightgrey"> {{dform.active}} 8 : 00 </td>
                    <td id="m2" style="background-color:lightgrey"> {{dform.active}} 9 : 00</td>
                    <td id="m3" style="background-color:lightgrey"> {{dform.active}} 10 : 00 </td>
                    <td id="m4" style="background-color:lightgrey"> {{dform.active}} 11 : 00</td>
                    <td id="m5" style="background-color:lightgrey"> {{dform.active}} 12 : 00</td>
                    <td id="m6" style="background-color:lightgrey"> {{dform.active}} 13 : 00</td>
                    <td id="m7" style="background-color:lightgrey"> {{dform.active}} 14 : 00</td>
                    <td id="m8" style="background-color:lightgrey"> {{dform.active}} 15 : 00</td>
                    <td id="m9" style="background-color:lightgrey"> {{dform.active}} 16 : 00</td>
                    <td id="m10" style="background-color:lightgrey"> {{dform.active}} 17 : 00</td>
                    <td id="m12" style="background-color:lightgrey"> {{dform.active}} 18 : 00</td>
            </tr>

    <tr>
                      <th> Tuesday </th>
                    <td id="t1" style="background-color:lightgrey"> {{dform.active}} 8 : 00 </td>
                    <td id="t2" style="background-color:lightgrey"> {{dform.active}} 9 : 00</td>
                    <td id="t3" style="background-color:lightgrey"> {{dform.active}} 10 : 00 </td>
                    <td id="t4" style="background-color:lightgrey"> {{dform.active}} 11 : 00</td>
                    <td id="t5" style="background-color:lightgrey"> {{dform.active}} 12 : 00</td>
                    <td id="t6" style="background-color:lightgrey"> {{dform.active}} 13 : 00</td>
                    <td id="t7" style="background-color:lightgrey"> {{dform.active}} 14 : 00</td>
                    <td id="t8" style="background-color:lightgrey"> {{dform.active}} 15 : 00</td>
                    <td id="t9" style="background-color:lightgrey"> {{dform.active}} 16 : 00</td>
                    <td id="t10" style="background-color:lightgrey"> {{dform.active}} 17 : 00</td>
                    <td id="t11" style="background-color:lightgrey"> {{dform.active}} 18 : 00</td>
            </tr>

            <tr>
                              <th> Wednesday </th>
                    <td id="w1" style="background-color:lightgrey"> {{dform.active}} 8 : 00 </td>
                    <td id="w2" style="background-color:lightgrey"> {{dform.active}} 9 : 00</td>
                    <td id="w3" style="background-color:lightgrey"> {{dform.active}} 10 : 00 </td>
                    <td id="w4" style="background-color:lightgrey"> {{dform.active}} 11 : 00</td>
                    <td id="w5" style="background-color:lightgrey"> {{dform.active}} 12 : 00</td>
                    <td id="w6" style="background-color:lightgrey"> {{dform.active}} 13 : 00</td>
                    <td id="w7" style="background-color:lightgrey"> {{dform.active}} 14 : 00</td>
                    <td id="w8" style="background-color:lightgrey"> {{dform.active}} 15 : 00</td>
                    <td id="w9" style="background-color:lightgrey"> {{dform.active}} 16 : 00</td>
                    <td id="w10" style="background-color:lightgrey"> {{dform.active}} 17 : 00</td>
                    <td id="w11" style="background-color:lightgrey"> {{dform.active}} 18 : 00</td>
            </tr>
                    <tr>
                              <th> Thursday </th>
                    <td id="th1" style="background-color:lightgrey"> {{dform.active}} 8 : 00 </td>
                    <td id="th2" style="background-color:lightgrey"> {{dform.active}} 9 : 00</td>
                    <td id="th3" style="background-color:lightgrey"> {{dform.active}} 10 : 00 </td>
                    <td id="th4" style="background-color:lightgrey"> {{dform.active}} 11 : 00</td>
                    <td id="th5" style="background-color:lightgrey"> {{dform.active}} 12 : 00</td>
                    <td id="th6" style="background-color:lightgrey"> {{dform.active}} 13 : 00</td>
                    <td id="th7" style="background-color:lightgrey"> {{dform.active}} 14 : 00</td>
                    <td id="th8" style="background-color:lightgrey"> {{dform.active}} 15 : 00</td>
                    <td id="th9" style="background-color:lightgrey"> {{dform.active}} 16 : 00</td>
                    <td id="th10" style="background-color:lightgrey"> {{dform.active}} 17 : 00</td>
                    <td id="th11" style="background-color:lightgrey"> {{dform.active}} 18 : 00</td>
            </tr>


                    <tr>
                              <th> Friday </th>
                    <td id="f1"  style="background-color:lightgrey"> {{dform.active}} 8 : 00 </td>
                    <td id="f2"  style="background-color:lightgrey"> {{dform.active}} 9 : 00</td>
                    <td id="f3"  style="background-color:lightgrey"> {{dform.active}} 10 : 00 </td>
                    <td id="f4"  style="background-color:lightgrey"> {{dform.active}} 11 : 00</td>
                    <td id="f5"  style="background-color:lightgrey"> {{dform.active}} 12 : 00</td>
                    <td id="f6"  style="background-color:lightgrey"> {{dform.active}} 13 : 00</td>
                    <td id="f7"  style="background-color:lightgrey"> {{dform.active}} 14 : 00</td>
                    <td id="f8"  style="background-color:lightgrey"> {{dform.active}} 15 : 00</td>
                    <td id="f9"  style="background-color:lightgrey"> {{dform.active}} 16 : 00</td>
                    <td id="f10" style="background-color:lightgrey"> {{dform.active}} 17 : 00</td>
                    <td id="f11" style="background-color:lightgrey"> {{dform.active}} 18 : 00</td>
            </tr>

                    <tr>
                              <th> Saturday </th>
                    <td id="s1" style="background-color:lightgrey"> {{dform.active}} 8 : 00 </td>
                    <td id="s2" style="background-color:lightgrey"> {{dform.active}} 9 : 00</td>
                    <td id="s3" style="background-color:lightgrey"> {{dform.active}} 10 : 00 </td>
                    <td id="s4" style="background-color:lightgrey"> {{dform.active}} 11 : 00</td>
                    <td id="s5" style="background-color:lightgrey"> {{dform.active}} 12 : 00</td>
                    <td id="s6" style="background-color:lightgrey"> {{dform.active}} 13 : 00</td>
                    <td id="s7" style="background-color:lightgrey"> {{dform.active}} 14 : 00</td>
                    <td id="s8" style="background-color:lightgrey"> {{dform.active}} 15 : 00</td>
                    <td id="s9" style="background-color:lightgrey"> {{dform.active}} 16 : 00</td>
                    <td id="s10" style="background-color:lightgrey"> {{dform.active}} 17 : 00</td>
                    <td id="s11" style="background-color:lightgrey"> {{dform.active}} 18 : 00</td>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
      <br>
             <div class="form-group">
                <div class="form-row">
                    <div class="form-group col-md-11">


                    </div>
                    <div class="form-group col-md-1">
                        <input type="submit" value="Submit" class="btn btn-info"/>
                    </div>
                </div>
            </div>

        </form>

        </div>
      </div>

    {% endblock %}

from flask import Flask, render_template, request, flash, redirect, url_for, session
import shelve
# <<<<<<< HEAD
from wtforms import Form, StringField, BooleanField,TextAreaField,RadioField, SelectField, validators, PasswordField, DateField, SubmitField, \
 IntegerField, FileField
from wtforms.validators import DataRequired
from datetime import date
import uuid
from wtforms import widgets, SelectMultipleField

app = Flask(__name__)

#this is my form!
 class DoctorAppointment(Form):
   active = BooleanField(True, False)
   
   
@app.route("/doctorbooking")
def doctorbooking():
    doctor_form = DoctorAppointment(request.form)
    if request.method == 'POST' and form.validate():
        check_list = doctor_form.active.data
        doctorappointment = Timeslots(day,check_list)

        db_read = shelve.open("doctorappointment.db")

        try:
            doctorappointmentlist = db_read["doctorappointment"]

        except:
            doctorappointmentlist = {}

        doctorappointmentlist[day] = check_list.data


        db_read.close()


        flash("Appointment added sucessfully!")
        
          return render_template("DoctorBooking.html", title="Doctor Booking",dform = doctor_form)

回答1:

Please let me know if it helps. In the end, a dictionary (data) is returned with the names of the checked checkboxes.

Flask code:

@app.route('/index/', methods=['POST', 'GET'])
def index():
    weekdays = ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun']
    timeslots = ['8AM', '9AM', '10AM', '11AM', '12PM', '13PM', '14PM','15PM','16PM','17PM','18PM']

    if request.method == "POST":
        data = dict((key, request.form.getlist(key) if len(
            request.form.getlist(key)) > 1 else request.form.getlist(key)[0])
            for key in request.form.keys())
        print (data) # do whatever you want with this data dict. Store it, flash messages, etc.

    return render_template('index.html',
       weekdays = weekdays,
       timeslots = timeslots,
       )

The template

<form method = "post" action = "">
  <table class="table table-bordered">
    <thead>
      {% for weekday in weekdays %}
      <tr>
        <th> {{ weekday }} </th>
          {% for timeslot in timeslots %}
            <td><input id="{{ weekday+timeslot }}" type="checkbox" name="{{ weekday+timeslot }}">{{ timeslot }}</td>
          {% endfor %}
      </tr>
      {% endfor %}
    </thead>
  </table>
  <div class="form-group col-md-1">
    <input type="submit" value="Submit" class="btn btn-info"/>
  </div>
</form>

来源：https://stackoverflow.com/questions/53871445/how-do-i-make-multiple-checkbox-with-a-unique-id-using-wtforms-so-that-i-can-sto

标签

python

select

Flask

wtforms