时间戳

首页 > 解决方案 > 用于构建 URL 的用户输入

javascript - 用于构建 URL 的用户输入

问题描述

我对 HTML 有一点经验，但对 JavaScript 很陌生。本质上，我希望用户输入成为 URL 的一部分。例如，我们可以有一些简单的东西，例如：

<script>
  function get_cityname() {
  var cityname = document.getElementById("cn").value;
  alert(cityname);
  }
</script>

<form>
  Enter city name:
  <input type = "text" size = "12" id = "cn">
  <input type = "submit" onclick = "get_cityname();">
</form>

这将创建一个文本框，用户在其中输入他们的文本（城市名称），然后单击它旁边的“提交”按钮，并且应该根据他们提供的信息弹出一个警报，以确保它有效。但是，此代码似乎仅适用于一个用户输入（因为“onclick”命令）。因此，我有两个问题：

  1. 上述变量如何包含在 URL 字符串中？如果它是简单的：
URLstring = "https://sampleurl" + cityname + "moretext.html"
  1. 如果我想包含两个甚至可能n个输入，如何扩展？例如，如果我创建更多用户提示框并希望用户也能够输入他们的邮政编码或州缩写，例如：
URLstring = "https://sampleurl" + cityname + "moretext" + zipcode + "moretext" + "stateabbreviation.html"

标签： javascripthtmlurl

解决方案

首先为您的表单指定一个action属性。这是您的表单将被提交的地方。然后将表单的method属性设置为GET. 最后，添加任意数量的字段（我假设您正在执行 GET 查询，例如https:url.com?key1=val1&key2=val2...）：

<form method="GET" action="https://sampleurl">
  Enter city name:
  <input type="text" size="12" id="cn">
  Enter zip code:
  <input type="text" pattern="[0-9]{5}"
  <input type="submit" ">
</form>

推荐阅读