多表单数据的单表单提交答案

【问题标题】：Single form submission of data from multiple forms多表单数据的单表单提交
【发布时间】：2020-05-08 13:42:42
【问题描述】：

我有以下（简化的）HTML 代码，其中包含两种形式：

<html>
  <form name="form1" method="get">
    Name: <select name="name" type="text">
      <option selected>A</option>
      <option>B</option>          
      <option>C</option>
      <option>D</option>
    </select>
  </form>

  <form name="form2" method="post" action="../cgi/test.pl">
    City: <input name="city" type="text"/>
    Country: <input name="country" type="text"/>
    <input value="Click Me!" type="submit"/>
  </form>
</html>

因此，当单击提交按钮时，将执行 CGI 脚本，我希望该脚本也能够摄取在第一个表单的下拉列表中选择的名称。关于如何实现这一目标的任何建议？在较旧的问题中，我只是发现了类似的东西，但不适合我的问题（如果我没记错的话……）。

【问题讨论】：

你需要 javascript 来实现这一点
@sauhardnc 是的，这是我通过查看较早的问题所理解的。但我发现并尝试修改的所有方法都不适合我。

标签： javascript html forms submit dom-events

【解决方案1】：

我已经创建了一个 sn-p，它可以按照您的意愿工作，我已经在 cmets 中进行了必要的解释。看看这是否适合你。

<form name="form1" method="get">
  Name:
  <select name="name" type="text" onchange="document.querySelector('#any_id').value = this.value" style="width: 50%">
    <!-- trigger onchange event and change the value of hidden field in the second form -->
    <option selected>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
</form>
<hr>
<form name="form2" method="post" action="../cgi/test.pl">
  <!--<input type="hidden" name="any_name" id="any_id" value="Your-default-value"> -->
  <!-- Make this field hidden↓↓, here only for demo purpose-->
  Hidden Field: <input type="text" name="any_name" id="any_id" value="A"><br><br>
  <!-- Give it a default value from your select element(which is A) -->
  City: <input name="city" type="text" /><br><br> Country: <input name="country" type="text" /><br><br>
  <input value="Click Me!" type="submit" />
</form>

然后从隐藏字段的name获取值（这里是any_name）。

【讨论】：

乐于助人。 :)