falsk 下拉框（自动获取默认数据）与输入框案例及数据提交接收

入口页 app.py


from flask import Flask, render_template, request
from flask_paginate import Pagination, get_page_parameter
# from elasticsearch import Elasticsearch
from itertools import zip_longestapp = Flask(__name__)# es = Elasticsearch()@app.route('/')
def indices():indices = ["q","e","d"] ##魔力后台处理得到下拉框展示内容# Render the templatereturn render_template('index.html', indices=indices)@app.route('/search', methods=['POST'])
def search():# Render the templatereturn "hello"if __name__ == '__main__':app.run(debug=True)

前端
index.html

<!-- 这是 HTML 的注释 -->
<!DOCTYPE html>
<html><head><!-- Import Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"></head><body style="margin: 50px;">
<!-- Dropdown menu with a list of indices -->
<!-- <form method="get" action="{{ url_for('search') }}"> -->
<form action="/search" method="post"><div class="form-group"><label for="index">Index</label><select class="form-control" name="index" id="index">{% for index in indices %}<option value="{{ index }}">{{ index }} </option>{% endfor %}</select></div><div class="form-group"><label for="query">Query</label><!-- <input type="text" class="form-control" name="query" id="query"> --><textarea class="form-control input-lg" name="query" id="query"></textarea></div><!-- Other form elements --><button type="submit" class="btn btn-primary">Search</button>
</form><!-- Import Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.16.0/dist/umd/popper.min.js" integrity="sha384-cE4Z1KWZL8BZJfIyO5DY7S8W1+OJ7hZ0d5+RKzWU6G2v6g3C3ejKfVuws8pwv7Vz" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script></body>
</html>

下拉框（自动获取默认数据）与输入框上传的数据，flask获取接收处理

from flask import request@app.route('/submit', methods=['POST'])
def submit():dropdown_value = request.form['index']textarea_value = request.form['query']# 处理数据...return 'Success'

textarea 如果无数据提交默认上传placeholder 默认的值

用js来控制

<!-- templates/index.html -->
<form action="/submit" method="post" onsubmit="submitForm(event)"><textarea name="textarea" id="textarea" placeholder="Enter some text here"></textarea><button type="submit">Submit</button>
</form>
<script>function submitForm(event) {const textarea = document.getElementById("textarea")if (!textarea.value.trim()) {textarea.value = textarea.placeholder}}
</script>

falsk 下拉框（自动获取默认数据）与输入框案例及数据提交接收相关推荐

js填充select下拉框并选择默认值
/* 使用json数组填充下拉框并复选 *//* 初始化下拉框数据 */ var jsonStr = { "data": [] }; for (var str in JsonStr ...
html 下拉菜单自动填充,下拉框自动实现自动填充
在我们平台中有这样的一个功能,设置了数据字典就可以使下拉框自动选择数据的类型,但是有一点不足的地方就是没有默认值,现在我要做的就是如何实现这个有默认值的下拉框. 还是有日期来举例.如图所示功能: (1 ...
vue element-ui级联选择器选中后下拉框自动收起
Cascader 级联选择器数据渲染通过 :options="options" 映射,让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props="{ chec ...
java的下拉框的设置默认值,html下拉选项属性 html下拉框怎么设置默认值？
html下拉框怎么设置默认值设置selected属性就可以,具体的用法,首先打开hbuilder软件,新建一个html文档,里面写入一个select下拉框: 然后给select中一个option设置 ...
element select 自动展开_原生js 让select下拉框自动展开可用size 属性来代替展开动作...
找遍全网都没一个比较好的例子!!! 什么获得焦点事件,或者添加一个点击事件都不能使下拉框自动展开最后用标签的siz属性定义和用法 size 属性规定下拉列表中可见选项的数目. 如果 size 属性 ...
html让下拉框自动选择,html下拉框设置连接 html怎么设置下拉列表必须选择
html下拉框怎么设置默认值设置selected属性就可以,具体的用法,首先打开hbuilder软件,新建一个html文档,里面写入一个select下拉框: 然后给select中一个option设置 ...
关于javaScript实现select下拉框自动展开
我本来的目的:是想实现鼠标移动到select下拉框上,下拉框自动展开. 原先思路:使用onmouseover()鼠标事件调用一个openSelect()函数,函数中调用onclick()方法,以为就 ...
下拉选数据查询过来的如何设置默认值为空_如何在某些情况下禁止提交Select下拉框中的默认值或者第一个值(默认选中的就是第一个值啦……)...
群里有个帅哥问了这么个问题,他的下拉框刚进页面时是隐藏起来的,但是是有值的,为啥呢?因为下拉框默认选中了第一个值呗,,, 所以提交数据的时候就尴尬啦,明明没有选,但是还是有值滴.怎么办呢? 一开始看到 ...
select下拉框动态获取数据
需求:select下拉框中的数据是从后台接口中获取的,而不是自己写的假数据步骤:(这里是用jquery及ajax发送请求) 一.页面上导入jquery在线资源二.代码实列如下(仅供参考) < ...

falsk 下拉框（自动获取默认数据）与输入框案例及数据提交接收

下拉框（自动获取默认数据）与输入框上传的数据，flask获取接收处理

textarea 如果无数据提交默认上传placeholder 默认的值

falsk 下拉框（自动获取默认数据）与输入框案例及数据提交接收相关推荐

最新文章

热门文章