时间戳

首页 > 解决方案 > 有没有办法在按下按钮后更改表单两次选择（两次选择）的动作？

javascript - 有没有办法在按下按钮后更改表单两次选择（两次选择）的动作？

问题描述

我正在为我的 IoT 系统设置一个网页，以便能够创建 If This Then That 语句。我希望能够从两个选项中进行选择。然后，按下按钮后，我想被重定向到另一个页面，即/{{第一个选择的值}}/{{第二个选择的值}}/。

我让它适用于一个选择，有一个 js 函数，当第一个选择被更改并改变表单操作时会调用它。我不知道如何更改代码以使用第二个选择来执行此操作，因为我对 js 不是很流利。

Html 模板（if_create_start.html）：

<form action="" method = "POST" id = "FORM_ID">
    <p>
        <select name="list_sensors_select" required onchange="changeAction(this)">
            <option disabeled selected>Choose a Sensor</option>
                {% for key, value in list_sensors.items() %}
                    <option value="{{ key }}">{{ value["nice_name"] }}</option>
                {% endfor %}
        </select>
        <script>
            changeAction = function(select){
                document.getElementById("FORM_ID").action = select.value;
            }
        </script>
    </p>

    <p>
        <select name="until_select">
        <option selected value="none">Function Disabled</option>
        <option value="time">Amount of Time Passed</option>
        <option value="button">Button Pressed</option>
    </select>
    </p>
    <p><input type="submit" value="Submit" /></p>
</form>

webapp.py：

@app.route('/if/', methods = ['POST', 'GET'])
def if_dash():
    with open('sensors.json') as json_file:
        list_sensors = json.load(json_file)

    return render_template("if_create_start.html", list_sensors=list_sensors)

@app.route('/if/<real_name>', methods = ['POST'])
def if_sensor(real_name):
    with open('sensors.json') as json_file:
        list_sensors = json.load(json_file)

    if not real_name in list_sensors:
        abort(404)

    else:
        if request.method == 'POST':
            result = request.form
            return render_template("result.html", result=result)

.json 文件：

{
    "garage_door": {"nice_name": "Garage Door Sensor", "type": "float"},
    "sensor1": {"nice_name": "Sensor 1", "type": "float"},
    "sensor2": {"nice_name": "Sensor 2", "type": "time"}
}

所以正如我所说，按下按钮后，我想被路由到 /if/{{ list_senors_select value }}/{{ until_select value }}/。我想我需要修改js脚本，但我不知道如何。如果有任何帮助，我将不胜感激。

我从来不知道要提供多少信息/脚本，所以如果我提供的太多/太少，请随时与我联系，我会减少它。

谢谢！

标签： javascripthtmlforms

解决方案

当 select1 或 select2 更改时，您需要更改操作：

<select id="select1" name="list_sensors_select" required onchange="changeAction()">
<select id="select2" name="until_select" onChange="changeAction()">

function changeAction() {
    // Sensor
    var select1 = document.getElementById("select1");
    var val1 = select1.options[select1.selectedIndex].value;
    // Until
    var select2 = document.getElementById("select2");
    var val2 = select2.options[select2.selectedIndex].value;
    // Change form action
    document.getElementById("FORM_ID").action = "/" + val1 + "/" + val2;
}

编辑：您还需要检查是否until_select没有/禁用。

推荐阅读