如何将js变量添加到表单中？

Question

<form action="recapitulatif.html" onsubmit="return isValidForm()" method="get" id="form"></form>您好，我有这个表单，它会进入下一页并将输入添加为参数。我想向参数添加一个 js 变量（目标）。这是由上一页中的另一个表格分配的。我尝试过添加let destination=findGetParameter('destination');document.getElementById("form").action=("recapitulatif.html?destination="+destination);在 isValidForm() 函数中，我用来检查输入是否有效，但它不起作用。

Answer 1

另一种解决方案是引入一个隐藏的输入字段，您可以通过 javascript 设置该输入字段的值。

这样，当您提交表单时，将发送目标字段的值。

<form action="recapitulatif.html" method="get" id="form">

    <input id="destination" type="hidden"/>

</form>

此解决方案的优点是您不必更改操作 url 或编写自定义代码来处理该值。

Answer 2

您可以提取验证并使用 URL API

<form action="recapitulatif.html" method="get" id="form">

</form>

JS：

document.getElementById("form").addEventListener("submit",function(e) {

  if (!isValid(this)) 

    e.preventDefault();

    return

  }

  const destination=findGetParameter('destination'); // I do not know what findGetParameter does

  const url = new URL(this.action);

  url.searchParams.set("destination",destination)

  this.action=url.toString();

});