修改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>

改变

//let url = new URL(location.href) // if you need to save it
let tId;
window.addEventListener("load",function() {
  document.querySelector("form").addEventListener("change",function(e) {
    clearTimeout(tId); // they are fiddling
    const sp = new URLSearchParams(new FormData(this)).toString()+"&end";
    //url.search=sp
    tId = setTimeout(function() { location.search = sp }, 2000); // allow the user to modify the controles
  })
})

<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>


</form>