修改HTML表单提交输出

Question

这当然是一个初学者的问题，但是我一直在寻找答案。我想使用以下html来控制我的项目之一。当我点击“提交”按钮时，值将添加到url中。这正是我想要的，但是我想修改附加的字符串，以使其解析起来更加容易。下面的html生成此URL：

[...]/Interface.html?tail=3&speed=45&col1=37&col2=210

但是我希望输出看起来像这样：

[...]/Interface.html?tail=3&speed=45&col1=37&col2=210&end

简而言之：在使用GET方法提交附件后，如何格式化附件的URL？

<title>Alu foil installation</title>
<meta name="generator" content="Bluefish 2.2.10">
<meta name="author" content="">
<meta name="date" content="">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">



<h1>Alu foil installation</h1>
<form>
  <p>
    <label for="ftail">Tail length:</label><br>
    <select name="tail" id="ftail">

      <option value="0">No tail</option>
      <option value="1">Short tail</option>
      <option value="2">Medium tail</option>
      <option value="3">Long tail</option>
    </select>
  </p>
  <p>
    <label for="speed">Set the speed:</label><br>
    <input type="range" id="speed" name="speed" min="0" max="50">
  </p>
  <fieldset>
    <legend>Color selection:</legend>
    <p>
      <label for="color1">Color 1 hue:</label>

      <input type="range" id="color1" name="col1" min="0" max="255">
    </p>
    <label for="color2">Color 2 hue:</label>

    <input type="range" id="color2" name="col2" min="0" max="255">
  </fieldset>

  <input type="submit" value="OK">

</form>

Answer 1

引入一个隐藏变量end

<input type="hidden" name="end" value="" />

（（=将附加一个end）

Answer 2

取决于您的Arduino或ESP32可以做什么，这是一个干净的解决方案

window.addEventListener("load",function() {
  document.querySelector("form").addEventListener("submit",function(e) {
    e.preventDefault();
    const sp = new URLSearchParams(new FormData(this)).toString();
    console.log("/Interface.html?"+sp+"&end"); // send this
  })
})

<title>Alu foil installation</title>
<meta name="generator" content="Bluefish 2.2.10">
<meta name="author" content="">
<meta name="date" content="">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">



<h1>Alu foil installation</h1>
<form>
  <p>
    <label for="ftail">Tail length:</label><br>
    <select name="tail" id="ftail">

      <option value="0">No tail</option>
      <option value="1">Short tail</option>
      <option value="2">Medium tail</option>
      <option value="3">Long tail</option>
    </select>
  </p>
  <p>
    <label for="speed">Set the speed:</label><br>
    <input type="range" id="speed" name="speed" min="0" max="50">
  </p>
  <fieldset>
    <legend>Color selection:</legend>
    <p>
      <label for="color1">Color 1 hue:</label>

      <input type="range" id="color1" name="col1" min="0" max="255">
    </p>
    <label for="color2">Color 2 hue:</label>

    <input type="range" id="color2" name="col2" min="0" max="255">
  </fieldset>

  <input type="submit" value="OK">

</form>