Question

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

为了测试，使用名为＆＃34; test＆＃34;的单个textarea创建了一个普通的html文件。在地址栏中键入http://myserver.com/simpleform.html?test=sampletext时，作为参数测试传递的文本不会填充该字段。

我认为将文本预填充到网络表单中的字段所需的唯一事情就是知道目标字段的名称。当失败时，我试图使用一些Javascript，它会在我在Cerbrus提供的另一个答案上找到的负载上执行：/ a / 14070223

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

＆＃13;

<!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>

＆＃13;

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

Answer 1

您需要使用id“test”设置textarea（因此JavaScript函数getElementById）：

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

</textarea>

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

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

</textarea>
</div>

Answer 2

如果网址是＆＃34; http://myserver.com/simpleform.html?test=sampletext＆＃34;，您可以执行以下操作：

＆＃13;

<!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>

＆＃13;

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

Answer 4

甚至可以创建一个接受字段值的Web表单使用单个独立HTML文件的URL参数？我不需要提交数据，仅用填充文本填充字段 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>

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

4 个答案: