如何创建接受字段值作为 URL 参数的 HTML 表单答案

【问题标题】：How To Create HTML Form That Accepts Field Values As URL Parameters如何创建接受字段值作为 URL 参数的 HTML 表单
【发布时间】：2017-06-28 22:05:56
【问题描述】：

目标是创建一个独立的 HTML 表单，使用作为 URL 参数传递的文本预填充字段。

为了进行测试，创建了一个纯 html 文件，其中包含一个名为“test”的文本区域。在地址栏中键入http://myserver.com/simpleform.html?test=sampletext 时，作为参数测试传递的文本不会填充该字段。

我认为在 Web 表单中将文本预填充到字段中唯一需要做的就是知道目标字段的名称。当失败时，我尝试使用一些可以在负载时执行的 Javascript，我在 Cerbrus 在此处提供的另一个答案中找到了这些 Javascript：/a/14070223

但结果没有变化。当我在地址栏中输入http://myserver.com/simpleform.html#test=sampletext 时，传递的文本不会出现在该字段中。这是我目前的代码：

<!DOCTYPE html>
<html>

<body onload="acceptParam()">

<script>
function acceptParam() {
  var hashParams = window.location.hash.substr(1).split('&'); // substr(1) to remove the `#`
  for(var i = 0; i < hashParams.length; i++){
      var p = hashParams[i].split('=');
      document.getElementById(p[0]).value = decodeURIComponent(p[1]);;
  }
 }
</script>
<center>
<textarea rows="15" name="test" cols="50">

</textarea>
</center>



</body>
</html>

是否甚至可以使用单个独立的 HTML 文件创建一个接受字段值作为 URL 参数的 Web 表单？我不需要提交数据，只需用 URL 中传递的文本填充字段。

【问题讨论】：

标签： javascript html

【解决方案1】：

如果 url 是“http://myserver.com/simpleform.html?test=sampletext”，你可以这样做：

<!DOCTYPE html>
<html>

<body onload="acceptParam()">
 
<center>
<textarea id='p' rows="15" name="test" cols="50">

</textarea>
</center>


<script>
function acceptParam() {
  var hashParams = window.location.href.substr(1).split('?'); // substr(1) to remove the `#`
      hashParams = hashParams[1].split('&');
      var p = hashParams[0].split('=');
      document.getElementById('p').value = p[1];
 }
</script>


</body>
</html>

【讨论】：

我完整复制了这个答案中的代码，并尝试了以下两种方法都没有成功：brainflurry.host-ed.me/files/testso.html?test=hello brainflurry.host-ed.me/files/testso.html#test=hello
@Brainflurry，代码正在检查有问题的哈希，我现在已经更正了使用 url 的代码，请再次检查，它应该可以工作。
这里的ID是p
谢谢你的回答，迪瓦斯。在修改 url 以将参数传递给 @Julian 指出的 '?p=' 之后，它加载得很好。我接受这个作为答案，因为它最容易理解。它修改了原始代码使其工作，通过比较清楚地指出了我的错误（我没有声明一个id）。顺便说一句，我修改了 Javascript 的最后一行以包含“decodeURIComponent()”，以便填充的字段显示纯文本。
代码简单、易读且有效。谢谢@Dij

【解决方案2】：

您需要使用id“测试”设置您的文本区域（因此JavaScript 函数getElementById）：

<textarea rows="15" id="test" name="test" cols="50">

</textarea>

另外，您不应该使用<center> 元素。最好创建一个带有标签style="text-align:center" 的父div，如下所示：

<div style="text-align:center">
<textarea rows="15" id="test" name="test" cols="50">

</textarea>
</div>

【讨论】：

感谢您的回答。我理解您对 id 参数的含义，但我没有实现 JavaScript 以使其协同工作的专业知识。作为初学者，在整个脚本的上下文中查看它会很有帮助。再次感谢！
JS 保持不变。您只需用我的 html 替换内部主体。

【解决方案3】：

您可以使用window.location.search 获取? 之后的字符串，或者使用window.location.hash 获取# 之后的字符串。

您可以使用URLSearchParams 来帮助解决这个问题，而不是自己解析和拆分字符串：

var queryString = window.location.search;
let params = new URLSearchParams(queryString.substring(1)); // remove the '?'
let value = params.get('test'); // will return the requested parameter

当然，您可以将它与循环结合起来，以获取所提供的任何参数。

另请注意，在您的示例中，您正在通过id 搜索元素（表单字段），但您的字段只有name 而没有id。

【讨论】：

警告，IE 不支持URLSearchParams
感谢理查德的贡献。您的回答导致了 IE 不支持 URLSearchParams 的宝贵见解。所以，也要感谢你@Julian！

【解决方案4】：

是否甚至可以创建一个接受字段值的 Web 表单使用单个独立 HTML 文件的 URL 参数？我不需要提交数据，仅使用传入的文本填充字段网址。

当然可以。

从查询字符串（? 字符之后的部分）获取数据和获取 URL 的片段/哈希部分是两件不同的事情。

这是一个工作示例：

<!DOCTYPE html>
<html>

<body onload="fetchParams()">

<script>
    function fetchParams()
    {
        document.getElementById('test').value = getQueryStringValue('foo');
        document.getElementById('test2').value = getQueryStringValue('bar');

        // This fetches the data after the hash-character and the value which has 'test' in front of the equals sign:
        //document.getElementById('test').value = getHashParam('test');
    }

    function getQueryStringValue(name)
    {
        var params = new URLSearchParams(window.location.search.substring(1));
        return params.get(name);
    }

    function getHashParam(name)
    {
        var params = window.location.hash.substring(1).split('&');
        console.log(params);
        for (var i = 0; i < params.length; i++)
        {
            if (params[i].split('=')[0].toLowerCase() === name.toLowerCase())
            {
                return params[i].split('=')[1]
            }
        }
    }

</script>

<textarea rows="15" id="test" name="test" cols="50">
</textarea>

<textarea rows="15" id="test2" name="test2" cols="50">
</textarea>


</body>
</html>

【讨论】：

感谢您的回复@HaukurHaf。我上传了您的代码，但仍然无法获取传递的参数来填充任一表单字段。见：brainflurry.host-ed.me/files/…
这是因为我的代码实际上是在尝试从名为 foo 和 bar 的参数中读取值。如果您想从名为 test 的参数中读取，只需在此处添加以下行： document.getElementById('test').value = getQueryStringValue('test');并删除 fetchParams() 函数中的其他两行。
感谢您的回答和帮助。我能够使用您的代码将参数传递给独立的 HTML 页面，但我接受了 Diwas Joshi 的答案，因为它更容易让我理解。 Diwas 的代码更接近我的原始代码，这让我可以更轻松地看到使其工作所需的更改。我没有完全掌握您提供的示例代码中的所有附加 Javascript。虽然我在学习！再次感谢。