python - 调用不同类型的html元素
问题描述
我想在 app.py 中这样的一个语句中调用单选按钮和文本输入：
question = quickQuizQuestions(request.form['TFtxtarea'], request.form.getlist('TFquestion'), request.form['MCQtxtarea'], request.form['MCQanswer'], request.form['txta'] , request.form['txtb'], request.form['txtc'])
但它给了我错误
sqlalchemy.exc.InterfaceError: (sqlite3.InterfaceError) 错误绑定参数 1 - 可能是不受支持的类型。[SQL: INSERT INTO quick_quiz_questions ("TFquestion", "TFanswer", "MCQquestion", "MCQanswer", "OptionA", "OptionB", "OptionC") 值 (?, ?, ?, ?, ?, ?, ? )] [参数：('saudi already', ['True'], 'what are u', 'c', 'saudi', 'spanish', 'german')] （此错误的背景：http:// /sqlalche.me/e/rvf5 )
所有字段都是文本输入，除了 TFanswer 是单选按钮
这是完整的 app.py
from flask import Flask, render_template, request, flash, url_for, redirect, session
from flask_sqlalchemy import SQLAlchemy
import ctypes
import sqlite3
from sqlalchemy import sql, create_engine, select, MetaData, Table
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:////Users/AFEER/projects/hello_flask/database.db'
app.config['SECRET_KEY'] = "random string"
db = SQLAlchemy(app)
db.app = app
#questions table
class quickQuizQuestions(db.Model):
def __init__(self, TFquestion, TFanswer, MCQquestion, MCQanswer, OptionA, OptionB, OptionC):
self.TFquestion = TFquestion
self.TFanswer = TFanswer
self.MCQquestion = MCQquestion
self.MCQanswer = MCQanswer
self.OptionA = OptionA
self.OptionB = OptionB
self.OptionC = OptionC
id = db.Column('question_id', db.Integer, primary_key=True)
TFquestion = db.Column(db.String(900))
TFanswer = db.Column(db.String(1))
MCQquestion = db.Column(db.String(900))
MCQanswer = db.Column(db.String(1))
OptionA = db.Column(db.String(1))
OptionB = db.Column(db.String(1))
OptionC = db.Column(db.String(1))
#students answers table
class studentAnswer(db.Model):
def __init__(self, student_id, student_name, student_answer, postedQuestion):
self.student_id = student_id
self.student_name = student_name
self.student_answer = student_answer
self.postedQuestion = postedQuestion
id = db.Column(db.Integer, primary_key=True)
# student_id = password
student_id = db.Column(db.Integer)
student_name = db.Column(db.String(50))
student_answer = db.Column(db.String(1))
postedQuestion = db.Column(db.String(900))
@app.route('/result')
def result():
return render_template('result.html', quickQuizQuestions=quickQuizQuestions.query.all())
@app.route('/quickQuizList', methods=['GET', 'POST'])
def quickQuizList():
if request.method == 'POST':
if request.form['TFtxtarea'] or request.form['MCQtxtarea']:
question = quickQuizQuestions(request.form['TFtxtarea'], request.form.getlist('TFquestion'), request.form['MCQtxtarea'], request.form['MCQanswer'], request.form['txta'], request.form['txtb'], request.form['txtc'])
db.session.add(question)
db.session.commit()
flash('Record was successfully added')
return render_template("result.html")
else:
flash('Please enter all the fields', 'error')
return render_template("quickQuizList.html")
@app.route('/test')
def test():
# if request.form['TFtxtarea']:
# return render_template("TFpagequestion.html")
#
# if request.form['MCQtxtarea']:
# return render_template("MCQpagequestion.html")
return render_template('test.html', quickQuizQuestions=quickQuizQuestions.query.order_by(-quickQuizQuestions.id).limit(1).all())
if __name__ =='__main__':
db.create_all()
app.debug = True
app.run()
这是 html 元素的 quickQuizList：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tools</title>
<style>
.header {
overflow: hidden;
background-color: #3F3B72;
padding: 20px 10px;
}
.header-right {
float: right;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
#buttonClos{
box-shadow: 0px 1px 0px 0px #f0f7fa;
background:linear-gradient(to bottom, #33bdef 5%, #019ad2 100%);
background-color:#33bdef;
border-radius:6px;
border:1px solid #057fd0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Verdana;
font-size:15px;
font-weight:bold;
padding:7px 18px;
text-decoration:none;
text-shadow:0px 0px 0px #5b6178;display:inline-block;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #FFFAFA;
}
.form{padding:20px;
font-size:20px;
}
</style>
<script>
function quickQuiz() {
var questionType = document.getElementById("questionType").value;
<!-- TF elements-->
var TFtxtarea = document.getElementById("TFtxtarea");
var label1 = document.getElementById("label1");
var Tanswer = document.getElementById("Tanswer");
var Fanswer = document.getElementById("Fanswer");
var labelT = document.getElementById("labelT");
var labelF = document.getElementById("labelF");
var TFsubmit = document.getElementById("TFsubmit");
<!-- MCQ elements-->
var MCQtxtarea = document.getElementById("MCQtxtarea");
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var txta = document.getElementById("txta");
var txtb = document.getElementById("txtb");
var txtc = document.getElementById("txtc");
var MCQsubmit = document.getElementById("MCQsubmit");
var label2 = document.getElementById("label2");
var MCQanswer = document.getElementById("MCQanswer");
if(questionType == "TF" || questionType == "tf")
{
TFtxtarea.style.display="block";
label1.style.display="block";
TFsubmit.style.display="block";
Tanswer.style.display="block";
Fanswer.style.display="block";
labelT.style.display="block";
labelF.style.display="block";
MCQtxtarea.style.display="none";
a.style.display="none";
b.style.display="none";
c.style.display="none";
txta.style.display="none";
txtb.style.display="none";
txtc.style.display="none";
MCQsubmit.style.display="none";
label2.style.display="none";
MCQanswer.style.display="none";
}
if(questionType == "MCQ" || questionType == "mcq")
{
MCQtxtarea.style.display="block";
a.style.display="block";
b.style.display="block";
c.style.display="block";
txta.style.display="block";
txtb.style.display="block";
txtc.style.display="block";
MCQsubmit.style.display="block";
label2.style.display="block";
MCQanswer.style.display="block";
TFtxtarea.style.display="none";
label1.style.display="none";
Tanswer.style.display="none";
Fanswer.style.display="none";
labelT.style.display="none";
labelF.style.display="none";
TFsubmit.style.display="none";
}
}
</script>
</head>
{%- for category, message in get_flashed_messages(with_categories = true) %}
<div class = "alert alert-danger">
{{ message }}
</div>
{%- endfor %}
<div class="header">
<a class="logo">QuickQuiz</a>
</div>
<form action = "{{ request.path }}" method = "POST">
<div class="form">
<p> Enter the question type (TF/MCQ):</p>
<input type="text" id="questionType" placeholder="TF or MCQ:">
<br><br>
<label style="border:inset" id="submitQuestionType" onclick="quickQuiz()"> Submit</label>
<br><br>
<textarea name="TFtxtarea" id="TFtxtarea" style="display:none" placeholder="Type your TF question here"></textarea>
<br><br>
<label style="display:none" id="label1">Choose the correct answer:</label>
<input style="display:none"type="radio" id="Tanswer" name="TFquestion" value="True" >
<label id="labelT" style="display:none">(True)</label><br>
<input style="display:none" type="radio" id="Fanswer" name="TFquestion" value="False">
<label id="labelF" style="display:none">(False)</label><br>
<input style="display:none" id="TFsubmit" type = "submit" value = "Submit & Post" />
<textarea name="MCQtxtarea" id="MCQtxtarea" style="display:none" placeholder="Type your MCQ question here"></textarea>
<br>
<label id="a" style="display:none">Option A</label>
<input type="text" name="txta" id="txta" style="display:none"> <br>
<label id="b" style="display:none">Option B</label>
<input type="text" name="txtb" id="txtb" style="display:none"> <br>
<label id="c" style="display:none">Option C</label>
<input type="text" name="txtc" id="txtc" style="display:none">
<br>
<label id="label2" style="display:none">Enter the correct answer</label>
<input type="text" id="MCQanswer" name="MCQanswer" style="display:none">
<br>
<input type="submit" id="MCQsubmit" style="display:none" value="Submit & Post">
</div>
</form>
</body>
</html>
解决方案
推荐阅读
- javascript - d3.js + GEOJSon 地图不显示
- angular - 带有身份验证令牌的 Angular bypassSecurityTrustResourceUrl
- node.js - 无法使用 npx 创建一个 Strapi 应用程序（尖锐模块问题，然后是 sqlite3 模块问题）
- html - CSS：样式表不反映更改
- flutter - 如何设置列表视图尾随填充
- java - Getdown 启动单实例 java GUI
- c# - 使用多个渠道，我做错了什么？
- html - json file missing Brackets
- ruby - Ruby 命令使用 AWS CLI 从 S3 下载多个文件夹
- amazon-web-services - Set Public IP information using remote-exec for a set of instances