单一表单提交多个表单的数据

Question

我有以下（简化的）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 脚本，我希望脚本也能够提取在第一个表单的下拉列表中选择的名称。关于如何实现这一目标的任何建议？在较旧的问题中，我只是发现了类似的东西但不适合我的问题（如果我没记错的话......）。

Answer 1

我已经创建了一个您想要的片段，我已经在必要时在评论中进行了解释。看看这是否适合你。

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

单一表单提交多个表单的数据

Single form submission of data from multiple forms

html

javascript

forms

submit

dom-events