Изменить 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

Вкратце: как отформатировать вложение в URL, который добавляется после отправки его методом GET?

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