是否可以覆盖的值<Input type = "hidden">通过让用户从下拉列表中选择？

Question

I want to assign "0" to my one hot encoded variable in HTML and when if the user select an option, the value will change from "0" to "1"我想将“0”分配给我在 HTML 中的一个热编码变量，当用户选择一个选项时，该值将从“0”变为“1”

My drop down list: "apples", "Orange", "grapes"我的下拉列表：“苹果”、“橙子”、“葡萄”

I want to assign all of them a value of 0 to start then when user select "apple" the value of it changes to "1" when submitted to the predictor我想为所有这些分配一个值 0 开始然后当用户选择“apple”时，它的值在提交给预测器时更改为“1”

This is my HTML code这是我的 HTML 代码

<!DOCTYPE html>
<html >
<head>
  <title>BOOM</title>
  <style>
    body {
        font-family: Verdana;
        font-size: 12px;
    }
  </style> 
</head>

<body>
    
    
    <h1>MPrediction</h1>

<form action="/predict"method="post">
    <input type="hidden" name="circle" value="0">
    <input type="hidden" name="triangle" value="0">
    <input type="hidden" name="square" value="0">
    
    <input type="hidden" name="red" value="0">
    <input type="hidden" name="green" value="0">
    <input type="hidden" name="blue" value="0">

    
        <select>
            <option value="none" selected disabled hidden>
              Select A Shape
          </option>
            <option name='circle' value="1">circle</option>
            <option name='triangle' value="1">triangle</option>
            <option name='square' value="1">square</option>
            
        </select>

        <select>
            <option value="none" selected disabled hidden>
              Select A Colour
          </option>
            <option name='red' value="1">red</option>
            <option name='green' value="1">green</option>
            <option name='blue' value="1">blue</option>

        </select>

<button type="submit">Predict</button>
    </form>
   <p>{{ my_prediction }}</p>
</body>
</html>

The problem I have now is that the users cannot change the hidden type input.我现在遇到的问题是用户无法更改隐藏类型输入。 I have thought of using 2 forms with the first being the hidden input and the second being the select, this will cause one of the predictors to be "01" which machine learning don't accept.我曾想过使用 2 种形式，第一种是隐藏输入，第二种是选择，这将导致其中一个预测变量为机器学习不接受的“01”。 Is there any way in flask that the code will choose the second value of the variable selected and the rest will just be "0".在烧瓶中有什么方法可以让代码选择所选变量的第二个值，其余的只是“0”。 Like I select "circle" and the system takes in "0" from the hidden form and "1" from the select form and when it goes to flask it takes "0" for all variables and "1" for the "circle" variable?就像我选择“circle”，系统从隐藏表单中获取“0”，从选择表单中获取“1”，当它进入烧瓶时，所有变量都需要“0”，“circle”变量需要“1” ? Please help!请帮忙！ I might lose my grade if I can't get this to work.如果我不能让它发挥作用，我可能会失去我的成绩。

This is my python Flask code (I am using jupyter notebook)这是我的 python Flask 代码（我使用的是 jupyter notebook）

import numpy as np
from flask import Flask, request, render_template
import joblib

app = Flask(__name__)
model = joblib.load('MC_Model.pkl')

@app.route('/')
def home():
    return render_template('BOM.html')


@app.route('/predict',methods=['POST'])
def predict():

    form_data = [float(x) for x in request.form.values()]
    features = [np.array(form_data)]
    prediction = model.predict(features)

    return render_template('BOM.html', MC_prediction='Usage Amount:{} '.format(prediction[0]))

if __name__ == "__main__":
    app.run(debug=False)

Answer 1

As for me your selects and options are totally wrong, and you don't need hidden .至于我你的selects和options是完全错误的，你不需要hidden 。

You should have name in <select> and every <option> should have uniq value - it can be index in features您应该在<select>有name并且每个<option>都应该有 uniq value - 它可以是features索引

    <select name="shape">
        <option value="" selected disabled hidden>Select A Shape</option>
        <option value="0">circle</option>
        <option value="1">triangle</option>
        <option value="2">square</option>
    </select>

and then you don't need hidden and in Flask you can get value and use as index然后你不需要hidden ，在 Flask 中你可以获得价值并用作index

features = [np.zeros(6)]

shape = request.form.get('shape')

if shape:  # if shape is not None:
    index = int(shape)
    features[0][index] = 1

I add also code which assigns "selected" to option from previous selection.我还添加了将"selected"分配给先前选择的option代码。

<option value="0" {% if shape == 0 %}selected{% endif %}>circle</option>

It needs to send shape , color to template.它需要将shape 、 color发送到模板。

Full working example.完整的工作示例。

I use render_template_string to have HTML in code so other people can simply copy and run it.我使用render_template_string在代码中包含 HTML，以便其他人可以简单地复制和运行它。

from flask import Flask, request, render_template_string
import numpy as np

app = Flask(__name__)

@app.route('/', methods=["GET", "POST"])
def home():
    # default values for `GET`
    color = None
    shape = None
    features = [np.zeros(6)]
    text = 'Usage Amount: ???'
    
    if request.method == 'POST':
        color = request.form.get('color')
        print('color:', color)
        
        shape = request.form.get('shape')
        print('shape:', shape)
                  
        if color:
            index = int(color)
            features[0][index] = 1
        if shape:
            index = int(shape)
            features[0][index] = 1
        print(features)
        
        #prediction = model.predict(features)
        prediction = [np.random.randint(0, 100)]
        
        text = 'Usage Amount: {}'.format(prediction[0])
                
    return render_template_string('''
<form action="/" method="POST">
    <select name="shape">
        <option value="" {% if not shape %}selected{% endif %} disabled hidden>Select A Shape</option>
        <option value="0" {% if shape == 0 %}selected{% endif %}>circle</option>
        <option value="1" {% if shape == 1 %}selected{% endif %}>triangle</option>
        <option value="2" {% if shape == 2 %}selected{% endif %}>square</option>
    </select>

    <select name="color">
        <option value="" {% if not color %}selected{% endif %} disabled hidden>Select A Colour</option>
        <option value="3" {% if color == 3 %}selected{% endif %}>red</option>
        <option value="4" {% if color == 4 %}selected{% endif %}>green</option>
        <option value="5" {% if color == 5 %}selected{% endif %}>blue</option>
    </select>

    <button type="submit">Predict</button>
</form>

<p>features: {{ features }}</p>
<p>prediction: {{ prediction }}</p>
''', prediction=text, features=features[0], color=color, shape=shape)

if __name__ == "__main__":
    app.run(debug=False)

I was thinking to use list with shapes and colors to generate options with for -loop.我正在考虑使用带有形状和颜色的列表来生成带有for循环的options 。

是否可以覆盖的值<Input type = "hidden">通过让用户从下拉列表中选择？

问题描述

1 个解决方案

解决方案1
0 2021-11-07 18:33:59

是否可以覆盖的值<Input type = "hidden">通过让用户从下拉列表中选择？

问题描述

1 个解决方案

解决方案1 0 2021-11-07 18:33:59

解决方案1
0 2021-11-07 18:33:59