时间戳

首页 > 解决方案 > 将多个 WTforms 输出合并到一个 JS 变量中并在 flask python 中获取

javascript - 将多个 WTforms 输出合并到一个 JS 变量中并在 flask python 中获取

问题描述

我试图弄清楚如何获取多个表单的值，将它们组合在一起并通过使用烧瓶请求将它们放入 python 中。我希望只有一个提交按钮。当它被按下时，所有表单中的所有选择选项将立即被捕获在 Flusk 一侧。

预期结果：

在 python 中，我应该能够将每个表单中的用户选择以及用户条目名称分配给一个变量。我希望用烧瓶捕获输出，例如 JS 函数中的控制台日志消息。因此，如果用户输入他/她的姓名，在表格 1 和表格 2 中进行选择，python 变量o应该是一个列表，例如['Mary','1','5']。此外，最好获取一个包含表单名称的字典，例如{'name':'Mary', 'form_1':'1','form_2':'6'}会很棒。

我使用 javascript 函数将所有选择的选项放入一个变量score中，并将其打印到 console.log。这就是我想在烧瓶中转发和捕获的内容。


这是我的烧瓶文件

from flask import Flask, render_template, request
import time


app = Flask(__name__)
app.static_url_path='/static'



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


@app.route('/response', methods=['GET', 'POST'])
def response():
        w = request.form['say']
        return render_template('index_2a.html', say=request.form['say'])

@app.route('/page', methods=['GET', 'POST'])
def page():
        # THIS IS WHAT I DON'T KWNO ???
        o = request.form.getlist('options')
        o1= request.form.getlist('submit_it')
        o2= request.form.getlist('design')
        o3 = request.form.getlist('options2')
        o4 = request.form.getlist('footer')
        print(o,o1,o2,o3,o4)
        return render_template('index_2a.html')


if __name__ == "__main__":
        app.run(host='127.0.0.1',port=8899)

和相应的index_2a.html模板：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

    <style type="text/css">

.node circle {
  cursor: pointer;
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node text {
  font-size: 11px;
}

path.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

    </style>
  </head>
  <body>
    <div id="body">
      <div id="footer">

	    <form action="{{ url_for('response') }}" method="post">
			<label for="say"> Enter your name:</label><br>
			<input id="say" name="say" ><br>
		</form> 


	<form id="brand" action="{{ url_for('page') }}" method="post" >
		<p>
		<input class="q1" type="radio" name="options" id="option1" value='1'> Option1 
		<input class="q1" type="radio" name="options" id="option2" value='2'> Option2 
		<input class="q1" type="radio" name="options" id="option3" value='3'> Option3 

		</p>

	</form>

	<form id="design" action="{{ url_for('page') }}" method="post" onsubmit="return submitForm(this);">
		<p>
		<input  class="q2" type="radio" name="options" id="option4" value='4'> Option4
		<input  class="q2" type="radio" name="options" id="option5" value='5'> Option5
		<input  class="q2" type="radio" name="options" id="option6" value='6'> Option6
		</p>

		<p><button name='submit_it' onclick="check()" method="post">Submit my scores!</button> </p>
	</form>

    </div>
    <script type="text/javascript">

var score=[];
function check () {
	var users = document.getElementsByName("say");
    var methods = document.getElementsByName("options");
	score.push( users[0].value );
    for (var i=0; i<methods.length; i++) {
         if (methods[i].checked == true) {
             score.push(methods[i].value);
            }
  		}
	console.log(score.toString())
	return score.toString()
}

function submitForm() {
  return confirm('Do you really want to submit the form?\n'+ score.toString());
}



    </script>
  </body>
</html>

标签： javascriptpythonhtmlflask

解决方案

推荐阅读