如何构建一个简单的HTML表单来构建两个表单字段的链接？

在工作中，我使用的一个系统输出航行计划。每个航次的URL构造为表单地址，后跟

？voyageCode=

，后跟航次编号，航次编号是两个字母的路线前缀和三位数字的航次编号

我想构建一个简单的页面，在这里我可以选择航线并输入航次号，而不是使用标准表单（它有一大堆我永远不需要使用的字段）

实际上，我正在尝试用以下内容构建一个表单：

一个下拉菜单或一组单选按钮，用于选择两个字母的路线代码

用于输入三位数路线代码的文本字段

将这些输入组合成链接的按钮或链接，格式为

[link]？voyageCode=[ROUTE code][VOYAGE NUMBER]

---

我的HTML知识已经过时了，而且我从来没有对表单做过很多工作。有人能建议我如何构造这个吗？

为什么不在下拉列表中使用

select

标记，在路线栏中使用经典的

输入文本

然后，对于链接部分，您应该通过
onClick
捕获按钮上的
单击
事件，然后调用一个基本上可以实现这一点的小函数：

function concatRouteCode(){
    var select= document.getElementById("routeCodeLetters");
    var routeCodeLetters = select.options[select.selectedIndex].value;
    var routeCodeNumber = document.getElementById('routeCode').value;

    return routeCodeLettres+routeCodeNumber;
}

为什么不在下拉列表中使用
select
标记，在路线编码中使用经典的
input text

然后，对于链接部分，您应该通过
onClick
捕获按钮上的
单击
事件，然后调用一个基本上可以实现这一点的小函数：

function concatRouteCode(){
    var select= document.getElementById("routeCodeLetters");
    var routeCodeLetters = select.options[select.selectedIndex].value;
    var routeCodeNumber = document.getElementById('routeCode').value;

    return routeCodeLettres+routeCodeNumber;
}

如果您真的想将代码组合成一个查询参数，那么必须使用Javascript获取两个字段的值并更改位置。如果将值放入单独的参数中，则不需要Javascript，如
？routeCode=xx&voyageNumber=123
。在这种情况下，您只需为select元素指定属性
name=routeCode
，为输入字段指定属性
name=voyageNumber

如果你想采用第一种方法，你会有

document.getElementById("idOfSubmitButton").addEventListener("load", function() {
    const routeCode = document.getElementById("idOfSelectElement").value;
    const voyageNumber = document.getElementById("idOfInputField").value;
    location.href = "base URL here" + "?voyageCode=" + routeCode + voyageNumber;
});

如果您真的想将代码组合成一个查询参数，那么必须使用Javascript获取两个字段的值并更改位置。如果将值放入单独的参数中，则不需要Javascript，如
？routeCode=xx&voyageNumber=123
。在这种情况下，您只需为select元素指定属性
name=routeCode
，为输入字段指定属性
name=voyageNumber

如果你想采用第一种方法，你会有

document.getElementById("idOfSubmitButton").addEventListener("load", function() {
    const routeCode = document.getElementById("idOfSelectElement").value;
    const voyageNumber = document.getElementById("idOfInputField").value;
    location.href = "base URL here" + "?voyageCode=" + routeCode + voyageNumber;
});

到目前为止，我能找到的最接近的答案是，它没有给出关于如何构造链接本身的太多信息。到目前为止，我能找到的最接近的答案是，它没有给出关于如何构造链接本身的太多信息。因此，它需要javascript才能工作，而不是我可以用基本HTML做的事情？从90年代末开始就没有做过任何脚本编写，当时也不是很擅长…：-（您想处理表单中的数据，据我所知，HTML对此无能为力，您需要使用JavaScript或后端解决方案。JS仍然是最轻量级和最合适的imo。至于表单本身，我目前正在使用
select…option
作为路线代码，使用
input…text
作为航次号，就像你建议的那样。好吧。我会用谷歌搜索一下，看看能不能找到一些代码来完成这项工作。干杯。：-）是的，我会看看我能不能先找出如何实现这些建议。我确信它们是很好的解决方案，我只需要教自己使用它们的框架。：-）所以这是需要javascript才能工作的东西，而不是我可以用基本HTML做的东西？从90年代末开始就没有做过任何脚本编写，当时也不是很擅长…：-（您想处理表单中的数据，据我所知，HTML对此无能为力，您需要使用JavaScript或后端解决方案。JS仍然是最轻量级和最合适的imo。至于表单本身，我目前正在使用
select…option
作为路线代码，使用
input…text
作为航次号，就像你建议的那样。好吧。我会用谷歌搜索一下，看看能不能找到一些代码来完成这项工作。干杯。：-）是的，我会看看我能不能先找出如何实现这些建议。我确信它们是很好的解决方案，我只需要教自己使用它们的框架。：-）干杯-我正在查找Javascript语法，以找出两个建议中哪一个最适合我的需要。以前几乎没有使用过Javascript，所以现在我有点不懂了。：-）恐怕我得承认失败了。我脑子里想的事情太多，工作中发生的事情太多，这让我很难集中注意力，也很难集中注意力。我习惯于寻找我不知道的东西，但当我发现学习它们有困难时，我会感到不安。非常感谢您的输入-我会在思考清楚的时候再回来讨论。干杯-我正在查找Javascript语法，以找出两个建议中哪一个最适合我的需要。以前几乎没有使用过Javascript，所以现在我有点不懂了。：-）恐怕我得承认失败了。我脑子里想的事情太多，工作中发生的事情太多，这让我很难集中注意力，也很难集中注意力。我习惯于寻找我不知道的东西，但当我发现学习它们有困难时，我会感到不安。非常感谢你的意见，我会在我能思考清楚的时候再回来。