[英]How to get value from a drop-down menu in HTML to use in my Flask app?
我試圖從來自熊貓數據框的下拉菜單中獲取一個值,該數據框有一些餐廳信息,例如(名稱、地址、評級等)我只是在這里選擇名稱選項客戶能夠選擇餐廳名稱...我需要客戶將提供的值,然后我將使用此值使用我的 ML 代碼進行預測。
到目前為止,我選擇了在按鈕中顯示的數據框信息,但是,我不知道如何獲取此信息以使用后記。 (有些地方他們說要使用,GET,其他地方要使用。我對 javascript 沒有太多了解。感謝您的幫助。
問候
使用燒瓶。
from flask import Flask, request, render_template,url_for
from flask_bootstrap import Bootstrap
import pandas as pd
app = Flask(__name__)
Bootstrap(app)
@app.route('/test')
def test():
data= pd.read_csv("data/restaurants.csv")
data= data["Name"]
return render_template('test.html', data= data)
測試.html
{% extends "bootstrap/base.html" %}
{% block content %}
<style>
.jumbotron {
background-color: #7547bd;
color: #ffffff;
}
</style>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index">Deep Free from...</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="about">ABOUT</a></li>
<li><a href="test">CUISINE STYLE</a></li>
<li><a href="location">LOCATION</a></li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center">
<h1>Choose the restaurant </h1>
<p>See the 5 Similar Cuisine Style</p>
<div class="dropdown">
<center>
<div class="btn-group dropright">
<button type="button" class="btn btn-primary">
Select Restaurant
</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="caret">.</span>
</button>
<div class="dropdown-menu">
</div>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
{% for datanum in data %}
<li role="presentation" class="divider"></li>
<p></p> <a class="dropdown-item" href=# value={{datanum}} id={{datanum}} >{{datanum}}</a></p>
{% endfor %}
</div>
</div>
</div>
</div>
</center>
</div>
</div>
</div>
<input type='hidden' id={{datanum}} value=''/>
<center>
<script>
document.querySelectorAll('a').forEach( function(el) {
el.addEventListener('click', function() {
var nameres = el.textContent;
document.querySelector('.dropdown-toggle').innerText = nameres;
document.querySelector('#{{datanum}}').value = nameres;
});
});
</script>
</center>
<div class="container-fluid bg-">
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Dublin, IRL</p>
<p><span class="glyphicon glyphicon-phone"></span> +383 878119949</p>
<p><span class="glyphicon glyphicon-envelope"></span> 10519637@mydbs.ie</p>
</div>
</div>
</div>
</body>
{% endblock %}
嘗試這個:
主文件
@main.route("/page", methods=['GET', 'POST'])
def page():
if request.method == "POST":
value_1 = request.form["value_1"]
# Add code that uses user input here
context = {
'dropdown_items' : ["A","B","C","D","E"]
}
return render_template('page.html', **context)
頁面.html
{% extends "bootstrap/base.html" %}
{% block content %}
<form method="POST" action="{{ url_for('main.page') }}">
<label>Dropdop Name: </label>
<div class="dropdown">
<select name="start_location">
{% for x in dropdown_items %}
<option value = "{{x}}">{{x}}</option>
{% endfor %}
</select>
</div>
</form>
{% endblock %}
樣式文件
.custom-select_drop_flight {
position: relative;
font-family: Arial;
}
.custom-select_drop_flight select {
display: none;
}
.select-selected {
background-color: DodgerBlue;
}
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
我為我的案例找到了一個更簡單的解決方案,現在顯示在一個變量中......現在我正在尋找如何將其發送到我的 ML 代碼。
<!DOCTYPE html>
<html>
<head>
<title>Deep free from...</title>
</head>
<body>
<p id="result"></p>
<select id="resn">
{% for datanum in data %}
<option value={{datanum}} id={{datanum}} >{{datanum}} </option>
{% endfor %}
</select>
<script>
function GetSelectedText(){
var e = document.getElementById("resn");
var result = e.options[e.selectedIndex].text;
document.getElementById("result").innerHTML = result;
}
</script>
<br/>
<br/>
<button type="button" onclick="GetSelectedText()">Confirm Restaurant </button>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.