IoT系统双下拉框表单提交路由配置技术求助

To get your form to submit to /if/{{sensor_value}}/{{until_value}}/, we’ll modify the JavaScript to read both select values and update the form action whenever either changes. We’ll also adjust your Flask route to accept both parameters.

Step 1: Modify the HTML/JavaScript #

Update your form’s select elements to trigger a shared function, then write that function to build the action URL from both selects:

<form action="" method="POST" id="FORM_ID">
  <p>
    <select name="list_sensors_select" required onchange="updateFormAction()">
      <option disabled selected>Choose a Sensor</option>
      {% for key, value in list_sensors.items() %}
      <option value="{{ key }}">{{ value["nice_name"] }}</option>
      {% endfor %}
    </select>
  </p>
  <p>
    <select name="until_select" onchange="updateFormAction()">
      <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>

<script>
function updateFormAction() {
  // Get references to the form and both select elements
  const form = document.getElementById("FORM_ID");
  const sensorSelect = document.querySelector('select[name="list_sensors_select"]');
  const untilSelect = document.querySelector('select[name="until_select"]');
  
  // Get the current values of both selects
  const sensorValue = sensorSelect.value;
  const untilValue = untilSelect.value;
  
  // Only set the action if a sensor has been selected (since it's required)
  if (sensorValue) {
    form.action = `/if/${sensorValue}/${untilValue}/`;
  } else {
    // Reset action if no sensor is selected yet
    form.action = "";
  }
}
</script>

Key Changes: #

• Both selects now call updateFormAction() when changed, so the action updates whenever either selection changes.
• The new function reads values from both selects and constructs the full action path using template literals (backticks for string interpolation).
• We check if a sensor is selected before setting the action (since the first select is required, the form won’t submit until this is done anyway).

Step 2: Update Your Flask Route #

Your existing route only accepts one parameter (real_name). Modify it to accept the second parameter (until_type) to match the new URL structure:

@app.route('/if/<real_name>/<until_type>', methods=['POST'])
def if_sensor(real_name, until_type):
    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
            # You can now use `until_type` in your logic if needed
            return render_template("result.html", result=result, until_type=until_type)

Notes: #

• The route now expects two URL parameters: real_name (from the first select) and until_type (from the second select).
• You can access until_type in your function to handle different logic based on the user’s selection (e.g., show different fields for time vs button triggers).

How It Works: #

1. When the user selects a sensor, the form action updates to include that sensor’s key and the default "none" value for the second select.
2. If the user changes the second select, the action updates immediately to reflect the new value.
3. When the form is submitted, Flask routes it to the updated if_sensor function with both parameters, which you can use to process the user’s IFTTT setup.

内容的提问来源于stack exchange，提问作者Daniel Janda